Live
x
<html> <head> <title>Pozycjonowanie</title> <style> body { margin: 0; font-family: sans-serif; } /* FIXED */ nav { /* Ustawiamy znacznik <nav> jako element "fixed", a więc będzie on miał zawsze tą samą pozycję na stronie. Jest to często spotykany zapis właśnie przy nawigacji. */ position: fixed; /* Znacznik ten będzie odsunięty od górnej i lewej krawędzi okna przeglądarki o 0px (zero pikseli) a więc będzie "przyklejony" właśnie do tych krawędzi. */ top: 0; left: 0; /* Chcemy, aby nasza nawigacja rozciągała się na całą szerokość strony. */ width: 100%; padding: 5px; background-color: bisque; /* Na temat z-index powiemy sobie więcej w następnym temacie. Jest on użyty w tym miejscu po to, aby nawigacja wyświetlała się "nad" wszystkimi innymi elementami strony. */ z-index: 2; } /* RELATIVE */ .relatives { /* Nie chcemy, aby nasze elementy były zasłonięte przez nawigację, więc przesuwamy je w dół za pomocą górnego margina. */ margin-top: 150px; /* Szara przerywana linia pokaże nam gdzie powinny znaleźć się elementy strony, gdyby były ułożone tylko za pomocą "Normal document flow" */ border: 1px dashed lightgray; } .relatives div { display: inline-block; /* Ustawiamy znaczniki <div> jako elementy "relative". Samo użycie "relative" nie zmieni nic w wyglądzie strony. Jedynie "aktywuje" nam możliwość przesuwania elementów. */ position: relative; width: 120px; text-align: center; margin: 0 10px; padding: 5px; } .one { /* Pierwszy z elementów relatywnych. Nie przemieszczamy go nigdzie, więc będzie znajdował się tam, gdzie ustawił go "Normal document flow". */ background-color: aqua; } .two { background-color: pink; /* Kolejny element relatywny. Tym razem będzie on odsunięty od swojej górnej krawędzi o "30px" a więc będzie niżej niż jego poprzednik. */ top: 30px; } .three { background-color: greenyellow; /* Sytuacja ta samo co w poprzednim przypadku, ale odsuwamy od dolnej krawędzi. */ bottom: 40px; } .four { background-color: lightblue; /* W tym przypadku przesuwamy w dwóch kierunkach na raz.*/ right: 50px; top: 50px; } /* ABSOLUTE */ .absolutes { margin-top: 100px; } .absolutes > div { text-align: center; } .five { /* Ustawiamy znacznik o klasie "five" jako elementy "absolute", tym samym wyjmujemy go z domyślnego rozmieszczenia elementu. Jeżeli za takim elementem znajduje się kolejny znacznik będący jego rodzeństwem, to "wskoczy" na jego miejsce, ponieważ "Normal document flow" nie przewiduje żadnych pustych miejsc na stronie. */ position: absolute; width: 200px; /* Znacznik ustawiony jako "absolute" pozycjonujemy względem pierwszego napotkanego znacznika nadrzędnego, który ustawiony jest jako element "relative". W tym przykładzie element z klasą "five" nie ma nad sobą żadnego innego elementu "relative, więc będzie pozycjonowany względem okna przeglądarki i zostanie umieszczony w miejscu które znajduje się 90px niżej niż górna krawędź okna i jest odsunięte o 50px od prawej krawędzi okna przeglądarki.*/ top: 90px; right: 50px; background: violet; border-radius: 30px; } .six { /* Element jest ustawiony jako "relative", dzięki czemu znajdujący się w nim <div>, który posiada "position" równy "absolute" będzie pozycjonowany własnie względem elemetu z klasą "six" a nie tak jak w poprzednim przypadku względem okna przeglądarki. */ position: relative; border: 1px dashed lightcoral; height: 300px; } .six div { width: 200px; /* Element ustawiony jako "absolute", będzie pozycjonowany względem swojego rodzica, ponieważ rodzic posiada właściwość "position" równą "relative". */ position: absolute; /* Element ten będzie odsunięty o 40% aktualnej wysokości rodzica od górnej krawędzi rodzica. */ top: 40%; /* Element ten będzie odsunięty o 40% aktualnej szerokości rodzica od lewej krawędzi rodzica. */ left: 40%; background: salmon; border-radius: 30px; } /* STICKY */ .sticky { /* Hybryda elemetów "relative" oraz "fixed", czyli "sticky". */ position: sticky; /* Element ten będzie zachowywał się jak element "relative" do czasu, gdy jego górna krawedź będzie w odległości większej niż 100px od górej krawędzi przeglądarki. Gdy ta odległość wyniesie 100px, wtedy element zachowa się jak element "fixed" a więc pozostanie w odległości 100px od górnej krawędzi do czasu, gdy odległość ta znowu będzie większa niż 100px. Brzmi zawile, ale efekt finalny jest bardzo ciekawy 🙂 */ top: 100px; width: 300px; background-color: darkgoldenrod; color: white; padding: 10px; margin: 20px; text-align: center; } /* Na sam koniec jeszcze raz pozycja "fixed", dzięki której możemy ustawić w prawym dolnym rogu przycisk na wzór popularnych obecnie "chat-botów". */ button { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; border: 1px solid grey; } </style> </head> <body> <nav> <h3>Fixed</h3> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </nav> <div class="relatives"> <div class="one"> <h3>Relative</h3> <p>top: -</p> <p>bottom: -</p> <p>left: -</p> <p>right: -</p> </div> <div class="two"> <h3>Relative</h3> <p>top: 30px</p> <p>bottom: -</p> <p>left: -</p> <p>right: -</p> </div> <div class="three"> <h3>Relative</h3> <p>top: -</p> <p>bottom: 40px</p> <p>left: -</p> <p>right: -</p> </div> <div class="four"> <h3>Relative</h3> <p>top: 50px</p> <p>bottom: -</p> <p>left: -</p> <p>right: 50px</p> </div> </div> <div class="absolutes"> <div class="five"> <h3>Absolute</h3> <p>Element pozycjonowany względem okna przeglądarki</p> <p>right: 100px</p> <p>top: 50px;</p> </div> <div class="six"> <div> <h3>Absolute</h3> <p>Element pozycjonowany względem rodzica, ponieważ rodzic posiada właściwość <code>position: relative</code></p> </div> </div> </div> <div class="sticky"> <h3>Sticky</h3> <p>Element zachowa się jak <code>fixed</code>, gdy zbliży się do górnej krawędzi</p> </div> <button>✔</button> <div style="height: 1000px; background: lightgray;"></div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.