CSS Layout - Vlastnost pozice
Tato position
vlastnost určuje typ metody umístění použité pro prvek (statický, relativní, pevný, absolutní nebo lepivý).
Pozice Nemovitost
Vlastnost position
určuje typ metody umístění použité pro prvek.
Existuje pět různých hodnot pozice:
static
relative
fixed
absolute
sticky
Prvky jsou poté umístěny pomocí vlastností nahoře, dole, vlevo a vpravo. Tyto vlastnosti však nebudou fungovat, pokud nebude position
nejprve nastavena vlastnost. Fungují také odlišně v závislosti na hodnotě pozice.
poloha: statická;
Prvky HTML jsou ve výchozím nastavení umístěny staticky.
Statické umístěné prvky nejsou ovlivněny vlastnostmi nahoře, dole, vlevo a vpravo.
Prvek s position: static;
není umístěn žádným zvláštním způsobem; je vždy umístěn podle normálního toku stránky:
Zde je použitý CSS:
Příklad
div.static {
position: static;
border: 3px solid #73AD21;
}
poloha: relativní;
Prvek s position: relative;
je umístěn relativně ke své normální poloze.
Nastavení vlastností nahoře, vpravo, dole a vlevo u relativně umístěného prvku způsobí, že bude upraven mimo svou normální polohu. Ostatní obsah nebude upraven tak, aby se vešel do mezery zanechané prvkem.
Zde je použitý CSS:
Příklad
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
poloha: pevná;
Prvek s position: fixed;
je umístěn relativně k výřezu, což znamená, že vždy zůstane na stejném místě, i když se stránka posune. Vlastnosti nahoře, vpravo, dole a vlevo se používají k umístění prvku.
Pevný prvek nezanechává mezeru na stránce, kde by se normálně nacházel.
Všimněte si pevného prvku v pravém dolním rohu stránky. Zde je použitý CSS:
Příklad
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;
pozice: absolutní;
Prvek s position: absolute;
je umístěn relativně k nejbližšímu umístěnému předkovi (namísto umístění vzhledem k výřezu, jako je pevný).
Nicméně; pokud absolutně umístěný prvek nemá žádné umístěné předchůdce, používá tělo dokumentu a pohybuje se spolu s posouváním stránky.
Poznámka: Absolutně umístěné prvky jsou odstraněny z normálního toku a mohou prvky překrývat.
Zde je jednoduchý příklad:
Zde je použitý CSS:
Příklad
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
poloha: lepivý;
Prvek s position: sticky;
je umístěn na základě pozice posouvání uživatele.
Lepivý prvek přepíná mezi relative
a fixed
, v závislosti na poloze posouvání. Je umístěn relativně, dokud není ve výřezu splněna daná pozice offsetu - pak se „přilepí“ na místo (jako position:fixed).
Poznámka: Internet Explorer nepodporuje pevné umístění. Safari vyžaduje předponu -webkit- (viz příklad níže). Musíte také zadat alespoň jedno z top
, right
, bottom
nebo , left
aby fungovalo lepivé umístění.
V tomto příkladu se lepivý prvek přilepí k horní části stránky ( top: 0
), když dosáhnete jeho pozice posouvání.
Příklad
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Umístění textu v obrázku
Jak umístit text přes obrázek:
Příklad
Zkus to sám:
Další příklady
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
Property | Description |
---|---|
bottom | Sets the bottom margin edge for a positioned box |
clip | Clips an absolutely positioned element |
left | Sets the left margin edge for a positioned box |
position | Specifies the type of positioning for an element |
right | Sets the right margin edge for a positioned box |
top | Sets the top margin edge for a positioned box |