Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
BF summer

position - Český CSS 3 manuál

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Pomocí CSS 3 vlastnosti position nastavujeme typ pozice elementu. Element může být vložen normálně do obsahu stránky, může z něj být však vytržen a umístěn na přesné souřadnice. Dokonce může být přichycen k některé z hran okna prohlížeče.

Hodnoty

  • static (výchozí) - Element je zobrazen na udané pozici s ohledem na další obsah dokumentu.
  • absolute - Element je zobrazen na udané pozici a je vytržen z ostatního obsahu dokumentu. Zobrazí se vždy přesně na dané souřadnice v rodičovském elementu a to i přes okolní prvky.
  • fixed - Element je umístěn relativně oproti oknu prohlížeče. Můžeme ho tak přichytit k nějaké hraně okna a při skrolování stránkou bude stále na stejném místě.
  • relative - Element je umístěn relativně oproti své pozici v dokumentu. Pokud mu tedy nastavíme levou pozici na 20px, zobrazí se 20px od svého původního místa.
  • inherit - Vlastnost position bude zděděna od rodičovského elementu.

Ukázka

<!DOCTYPE html>
<html>
        <head>
                <style>
                        #ptak
                        {
                                position: absolute;
                                left: 100px;
                                top: 20px;
                        }
                </style>
        </head>
        <body>
                <img src="ptak.png" alt="Pták" id="ptak" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit molestie ligula et faucibus. Nam pharetra velit at eros laoreet eget interdum orci pretium. Quisque diam quam, fringilla vel venenatis vel, placerat ut ante.</p>
                <p>Proin a justo a justo vulputate placerat. Aliquam nec pellentesque tellus. Donec tincidunt elementum egestas. Sed sit amet sem erat. Nunc in turpis mauris. Aliquam quis urna ut tellus luctus venenatis eu sit amet lacus.</p>
        </body>
</html>

Výsledek:

Ukázka zastavení absolutní pozice v CSS

 

Všechny články v sekci
Pozicování a velikost - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!