CSS Layout - Vlastnost pozice

Obsah

Vlastnost position určuje typ metoda umístění použitá pro prvek (statická, relativní, pevná, absolutní nebo lepkavý).

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 pak umístěny pomocí horní, dolní, levé a pravé strany vlastnosti. Tyto vlastnosti však nebudou fungovat bez pozice vlastnost je nastavena jako první. Fungují také různě v závislosti na pozici hodnota.

CSS vlastnost `position: static;`

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; to je vždy umístěny podle normálního toku stránky:

This <div> element has position: static;

Zde je použitý CSS:

Příklad

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

CSS vlastnost `position: relativní;`

Prvek s position: relativní; je umístěn relativně ke své normální pozici.

Nastavení vlastností nahoře, vpravo, dole a vlevo u relativně umístěného prvku způsobí musí být nastaven mimo svou normální polohu. Ostatní obsah nebude upraven tak, aby se vešel do mezery, kterou po něm zůstane živel.

This <div> element has position: relative;

Zde je použitý CSS:

Příklad

div.relative {
  position: relative;
  
left: 30px;
  border: 3px solid #73AD21;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

CSS vlastnost `position: fixed;`

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. Vrchol, vlastnosti right, bottom a left 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

This <div> element has position: fixed;

CSS vlastnost `position: absolute;`

Prvek s position: absolute; je umístěn relativně k nejbližšímu umístěnému předkovi (místo umístění vzhledem k výřezu, jako pevné).

Nicméně; pokud absolutně umístěný prvek nemá žádné umístěné předky, 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:

This <div> element has position: relative;

This <div> element has position: absolute;

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

CSS vlastnost `position: sticky;`

Prvek s position: sticky; je umístěn na základě pozice posouvání uživatele.

Přilepený prvek přepíná mezi relativním a pevným v závislosti na pozici 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 -webkit- prefix (viz příklad níže). Musíte také zadat alespoň jeden z top, vpravo, dole nebo vlevo pro lepivé umístění do práce.

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Umístění textu v obrázku

Jak umístit text přes obrázek:

Příklad

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Zkus to sám:

Vlevo nahoře →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

Vpravo nahoře →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

Vlevo dole →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

Vpravo dole →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Na střed →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

Další příklady

Tento příklad ukazuje, jak nastavit tvar prvku. Prvek je oříznut do tohoto tvaru a zobrazen.

Nastavte tvar prvku

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

Všechny vlastnosti umístění CSS

bottom: Nastaví okraj spodního okraje pro umístěný rámeček
clip: Klipy absolutně umístěný prvek
left: Nastaví levý okraj pro umístěný rámeček
position: Určuje typ umístění prvku
right: Nastaví pravý okraj pro umístěný rámeček
top: Nastaví horní okraj okraje pro umístěný rámeček

CSS Layout - Vlastnost pozice

Obsah

Pozice Nemovitost

CSS vlastnost position: static;

Příklad

CSS vlastnost position: relativní;

Příklad

CSS vlastnost position: fixed;

Příklad

CSS vlastnost position: absolute;

Příklad

CSS vlastnost position: sticky;

Příklad

Umístění textu v obrázku

Příklad

Další příklady

Všechny vlastnosti umístění CSS

CSS vlastnost `position: static;`

CSS vlastnost `position: relativní;`

CSS vlastnost `position: fixed;`

CSS vlastnost `position: absolute;`

CSS vlastnost `position: sticky;`