CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS Layout - Vlastnost pozice


Tato positionvlastnost určuje typ metody umístění použité pro prvek (statický, relativní, pevný, absolutní nebo lepivý).


Pozice Nemovitost

Vlastnost positionurč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:

Tento prvek <div> má pozici: static;

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.

Tento prvek <div> má pozici: relativní;

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;
}
Tento prvek <div> má 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:

Tento prvek <div> má pozici: relativní;
Tento prvek <div> má pozici: 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;
}

poloha: lepivý;

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

Lepivý prvek přepíná mezi relativea 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, bottomnebo , leftaby 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

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

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.


Test Yourself With Exercises

Exercise:

Position the <h1> element to always be 50px from the top, and 10px from the right, relative to the window/frame edges.

<style>
h1 {
  : ;
  : 50px;
  : 10px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


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