06 Layout & Pozice — CSS Taháček

display

Typ zobrazení elementu

block, inline, inline-block, flex, grid, none, contents — definuje jak se element chová v layoutu.

display určuje jak element participuje v layoutu. none odstraní z dokumentu úplně (na rozdíl od visibility: hidden). contents je moderní hodnota — element sám zmizí z boxového modelu, ale jeho děti zůstanou ve flow.

// display: contentsOdstraní box elementu ale zachová jeho children. Výhodné pro: přístupné wrapper elementy v gridu (grid ignoruje nested wrappery), custom elementy které potřebují být přímé děti flex/grid kontejneru.

Hodnoty

block inline inline-block flex inline-flex grid inline-grid none contents table list-item

Srovnání block vs inline vs inline-block

block	Nový řádek, plná šířka, přijímá width/height/margin
inline	Teče s textem, ignoruje width/height, vertikální margin
inline-block	Teče s textem, ALE přijímá width/height/margin
none	Odstraní z DOM layoutu úplně (ne visibility: hidden)
contents	Odstraní box, zachová children ve flow

none vs visibility: hidden — none uvolní místo
inline-block: galerie obrázků, inline tlačítka
display: contents pro přístupné flex/grid wrappery
table/table-cell — fallback pro starší prohlížeče

Příklady

CSS

/* Skrýt / zobrazit */
.hidden  { display: none; }
.visible { display: block; }

/* inline-block galerie */
.thumbnail {
  display: inline-block;
  width: 100px;
  height: 100px;
  vertical-align: top;
}

/* Toggle menu */
.menu { display: none; }
.menu.open { display: flex; }

/* display: contents pro přístupnost */
.nav ul {
  display: contents; /* ul box zmizí */
}
/* li jsou nyní přímé děti flex nav */

/* Responsive hide */
@media (max-width: 768px) {
  .desktop-only { display: none; }
}
@media (min-width: 768px) {
  .mobile-only { display: none; }
}

position

Typ pozicování

static, relative, absolute, fixed, sticky. absolute je relativní k nejbližšímu positioned rodiči.

static (default): normální flow, top/left/etc. nemají efekt. relative: posune se relativně ke své normální pozici, zachová místo v layoutu. absolute: vytáhne z flow, pozicuje k nejbližšímu positioned rodiči (ne-static). fixed: relativní k viewportu. sticky: kombinace relative + fixed.

// Sticky záludnostiposition: sticky nefunguje pokud: rodič má overflow: hidden/auto/scroll (zabrání sticky), element nemá definovaný top/bottom, nebo rodič je příliš malý. Sticky funguje jen dokud je element uvnitř svého scroll kontejneru.

Hodnoty

static relative absolute fixed sticky

Živá ukázka — absolute v relative rodiči

relative rodič

absolute: top:8 right:8

absolute: bottom:8 left:8

Absolute hledá nejbližší positioned (ne-static) rodiče
Přidat position: relative na rodiče = anchor pro absolute děti
sticky: top: 0 nutné pro sticky header
fixed: vytáhne z flow, nezabírá místo v layoutu
inset: 0 = top:0 right:0 bottom:0 left:0 (zkratka)

Příklady

CSS

/* Sticky navigace */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Overlay přes celý rodič */
.card { position: relative; }
.card-overlay {
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  background: rgba(0, 0, 0, 0.5);
}

/* Badge na kartě */
.card { position: relative; }
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Fixed modal overlay */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

/* Centered absolute child */
.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Sticky sidebar */
.sidebar {
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  /* align-self: flex-start nutné v Flex! */
}

✅ position: sticky; top: 0; pro nav

❌ sticky nefunguje s overflow: hidden na rodiči

z-index

Vrstvení elementů

Vyšší číslo = vpředu. Funguje jen na positioned nebo flex/grid items. Stacking context záludnost!

z-index řídí vrstvení overlappujících elementů. Funguje pouze na: positioned elementy (relative, absolute, fixed, sticky), flex items a grid items. Stacking context: každý positioned element s z-index != auto tvoří nový stacking context — jeho děti se porovnávají jen uvnitř kontextu.

// z-index nefunguje?Nejčastější problém: element má z-index ale není positioned (position: static). Nebo: element je uvnitř stacking contextu s nižším z-index než soupeřící element — i z-index: 9999 uvnitř z-index: 1 kontextu nebude přes z-index: 2 vně. Řešení: přesunout element mimo problematický stacking context.

Hodnoty

auto číslo (záporné i kladné) 0

Doporučený z-index systém

1–9	Normální elevated prvky (karty, dropdowns)
10–99	Sticky header, sidebary
100–999	Modaly, dialogy, overlay
1000+	Toast notifikace, tooltips, system UI

Funguje jen na positioned nebo flex/grid items
Stacking context: opacity, transform, filter také vytvoří
isolation: isolate = nový stacking context bez z-index
Definujte CSS proměnné pro z-index systém

Z-index systém s CSS proměnnými

CSS

/* Definujte systém z-index hodnot */
:root {
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
  --z-tooltip:  60;
}

/* Použití */
.dropdown { z-index: var(--z-dropdown); }
.nav-sticky { z-index: var(--z-sticky); }
.modal { z-index: var(--z-modal); }

/* isolation: isolate = stacking bez z-index */
.card {
  isolation: isolate;
  /* Děti karty se nebudou prolínat s okolím */
}

/* Záporný z-index — za rodiče */
.card-bg {
  position: absolute;
  z-index: -1;
  /* Bude za rodičem ale před jeho rodiči */
}

object-fit

Přizpůsobení médií

Jak img nebo video vyplní svůj kontejner. cover = vyplnit (ořízne). contain = celý viditelný. object-position pro výřez.

MODERNÍ

object-fit funguje na <img>, <video> a dalších replaced elements. cover: vyplní celý kontejner, ořízne přesahující části (zachová poměr stran). contain: celý obsah viditelný, mohou být letterboxové pruhy. fill: roztáhne (deformuje).

// cover vs containcover = jako background-size: cover. Vyplní celou plochu, může oříznout okraje. Ideální pro karty, galerie, avatar obrázky. contain = jako background-size: contain. Celý obsah viditelný s pruhami. Ideální pro loga, produktové obrázky kde nechcete ořez.

Hodnoty

fill cover ← nejčastější contain none scale-down

Živá ukázka

fill (deformuje)

cover (ořízne)

contain (pruhy)

scale-down

cover pro avatar fotky, galerie, hero obrázky
contain pro loga, produktové obrázky
object-position: center top = focusovat vrchní část
Funguje na img, video, iframe, canvas

Příklady

CSS

/* Karta s obrázkem — cover */
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

/* Avatar — kruhový, cover */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top; /* hlava nahoře */
}

/* Produktový obrázek — contain */
.product-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f9f9f9;
  padding: 1rem;
}

/* Logo — scale-down (nepřekročí přirozený rozměr) */
.logo-img {
  max-width: 200px;
  height: 60px;
  object-fit: scale-down;
}

/* Video background */
.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

aspect-ratio

Poměr stran

Zachová proporce bez fixní výšky. 16/9, 4/3, 1/1. Nahrazuje padding-top hack pro video embeddy.

MODERNÍ

aspect-ratio zachová poměr stran elementu — výška se dopočítá automaticky z šířky. Nahrazuje starý padding-top hack (padding-top: 56.25% pro 16:9). Funguje i na flex/grid items. Pokud obsah přesáhne výpočtenou výšku, element se zvětší.

// Starý padding-top hack vs aspect-ratioStarý způsob: position: relative + padding-top: 56.25% + absolutně pozicované děti uvnitř. Moderní: aspect-ratio: 16/9 — přímočaré, čitelné, funguje bez position trikery. Podpora: všechny moderní prohlížeče.

Hodnoty

auto 1 / 1 (čtverec) 16 / 9 4 / 3 3 / 2 2 / 1

Živá ukázka

1/1

16/9

9/16

Nahrazuje padding-top: 56.25% video hack
Funguje na img, video, div, flex/grid items
Obsah který přesáhne výšku: element se zvětší (min-height chování)
aspect-ratio: auto použije přirozený poměr obrázku

Příklady

CSS

/* Čtverec */
.square { aspect-ratio: 1; }
/* nebo: aspect-ratio: 1 / 1; */

/* Video embed 16:9 */
.video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Produktová karta */
.product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Avatar */
.avatar {
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

/* Thumbnail grid */
.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ❌ Starý padding hack */
.old { padding-top: 56.25%; position: relative; }
.old > * { position: absolute; inset: 0; }

/* ✅ Moderní */
.new { aspect-ratio: 16 / 9; }

clip-path

Ořez tvaru elementu

Ořízne element na tvar: inset, circle, ellipse, polygon, path. Animovatelné pro reveal efekty.

MODERNÍ

clip-path ořízne viditelnou oblast elementu na definovaný tvar — zbytek je neviditelný a neklikatelný. Tvary: inset(), circle(), ellipse(), polygon(), path(). Animovatelné — skvělé pro reveal efekty.

// clip-path animaceclip-path: circle(0% at center) → circle(150% at center) = reveal efekt ze středu. Funguje s transition a animation. Stejné typy tvarů lze interpolovat — polygon(body) → polygon(jiné body) = morph animace.

Funkce

none inset(top right bottom left) circle(radius at x y) ellipse(rx ry at x y) polygon(x1 y1, x2 y2...) path('SVG path')

Živá ukázka

circle

circle(50%)

tri

polygon

hex

hexagon

cut

cut corner

slant

slanted

inset

clippy.bennadel.com — generátor polygon hodnot
Animovat: circle(0%) → circle(150%) = reveal
Obsah mimo clip = neviditelný a neklikatelný
inset(val round radius) pro zaoblené rohy

Příklady

CSS

/* Kruh */
.circle {
  clip-path: circle(50% at 50% 50%);
}

/* Trojúhelník */
.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Šikmý hero section */
.hero {
  clip-path: polygon(
    0 0, 100% 0, 100% 90%, 0 100%
  );
}

/* Odříznutý roh */
.cut-corner {
  clip-path: polygon(
    0 0, calc(100% - 20px) 0,
    100% 20px, 100% 100%,
    0 100%
  );
}

/* Reveal animace */
.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s ease;
}
.reveal.active {
  clip-path: circle(150% at 50% 50%);
}

/* Hover reveal na kartě */
.card-img { clip-path: inset(0 0 0 0); }
.card:hover .card-img {
  clip-path: inset(5px 5px 5px 5px round 8px);
}

/* Polygon hover morph */
.shape {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}
.shape:hover {
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

float & clear

Obtékání elementů

Dnes převážně pro text obtékající obrázek. Pro layout: použijte Flex nebo Grid místo float!

float byl původní nástroj pro layout (před Flexbox/Grid). Dnes: jen pro text obtékající obrázek nebo prvek. Pro layout vždy použijte Flex nebo Grid — jsou prediktabilní, přístupné a nezpůsobují "clearfix" problémy.

// clearfix — historická záležitostFloat vytahuje element z flow, rodič "zkolabuje" (nemá výšku). Clearfix to opravoval přidáním pseudo-elementu. Dnes: overflow: hidden na rodiči nebo display: flow-root vytvoří BFC a automaticky "clearuje" floaty. Nebo prostě použijte Flex/Grid.

Hodnoty float

none left right inline-start inline-end

Hodnoty clear

none left right both

Float jen pro text obtékající obrázek/media
display: flow-root na rodiči = moderní clearfix
shape-outside: circle() = text obtéká kulatý obrázek
Pro layout: VŽDY Flex nebo Grid místo float

Správné použití float

CSS

/* ✅ Správné: text obtékající obrázek */
.article img {
  float: left;
  margin: 0 1.5rem 1rem 0;
  shape-outside: circle(50%);
  /* Text obtéká kulatý tvar! */
}

/* Clearfix — moderní způsob */
.clearfix { display: flow-root; }
/* nebo: overflow: hidden; */

/* ❌ Float pro layout — špatně */
.sidebar { float: left; width: 30%; }
.main    { float: left; width: 70%; }

/* ✅ Flex místo float layoutu */
.layout  { display: flex; gap: 2rem; }
.sidebar { flex: 0 0 280px; }
.main    { flex: 1; }

/* shape-outside pro fancy obtékání */
.img-left {
  float: left;
  shape-outside: polygon(
    0 0, 100% 0, 100% 75%, 0 100%
  );
  margin-right: 1rem;
}