8.1 Normalny przepływ
Pozycjonowanie elementów w CSS odgrywa kluczową rolę w zarządzaniu ich układem i interakcjami na stronie internetowej. Decyduje ono, jak elementy są rozmieszczane w stosunku do innych elementów i do swojego kontenera. Przyjrzyjmy się, jak różne rodzaje pozycjonowania wpływają na przepływ elementów.
Przepływ dokumentu i pozycjonowanie
Elementy w normalnym przepływie dokumentu są rozmieszczane jeden po drugim w kolejności określonej przez HTML. Elementy blokowe
(np. <div>, <p>, <h1>) są rozmieszczane pionowo,
zajmując całą szerokość kontenera nadrzędnego, a elementy liniowe (np. <span>, <a>, <em>)
są rozmieszczane poziomo, zajmując tylko potrzebną przestrzeń.
Przykład:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Element blokowy</div>
<span class="inline">Element liniowy</span>
<span class="inline">Element liniowy</span>
8.2 Wpływ pozycjonowania na przepływ dokumentu
Różne typy pozycjonowania mogą zmieniać standardowy przepływ dokumentu. Przyjrzyjmy się, jak to działa:
Pozycjonowanie static
Pozycjonowanie static jest wartością domyślną i nie zmienia normalnego przepływu dokumentu. Elementy
z position: static są rozmieszczane w kolejności określonej przez HTML.
Wpływ na przepływ:
- Elementy pozostają w normalnym przepływie
- Elementy są rozmieszczane jeden za drugim zgodnie z ich kolejnością w HTML
Pozycjonowanie relative
Elementy z position: relative pozostają w normalnym przepływie, ale mogą być przesunięte względem swojego
normalnego położenia za pomocą właściwości top, right, bottom, left.
Przesunięcie nie wpływa na położenie innych elementów.
Wpływ na przepływ:
- Elementy pozostają w normalnym przepływie
- Przesunięcie elementu nie zmienia położenia sąsiednich elementów
Pozycjonowanie absolute
Elementy z position: absolute są usuwane z normalnego przepływu dokumentu i rozmieszczane względem najbliższego
pozycjonowanego przodka. Jeśli takiego przodka nie ma, są rozmieszczane względem początkowego
kontenera (zazwyczaj to <html> lub <body>).
Wpływ na przepływ:
- Elementy są usuwane z normalnego przepływu
- Są pozycjonowane względem najbliższego pozycjonowanego przodka
- Inne elementy zachowują się tak, jakby tych elementów nie było
Pozycjonowanie fixed
Elementy z position: fixed są usuwane z normalnego przepływu i rozmieszczane względem okna przeglądarki.
Pozostają na miejscu podczas przewijania strony.
Wpływ na przepływ:
- Elementy są usuwane z normalnego przepływu
- Są pozycjonowane względem okna przeglądarki
- Pozostają na miejscu podczas przewijania strony
- Inne elementy zachowują się tak, jakby tych elementów nie było
Pozycjonowanie sticky
Elementy z position: sticky zachowują się jak względnie pozycjonowane, dopóki nie osiągną
określonego progu przewijania, po czym stają się stałe.
Wpływ na przepływ:
- Elementy pozostają w normalnym przepływie do osiągnięcia progu przewijania
- Po osiągnięciu progu element jest stały i nie wpływa już na normalny przepływ
8.3 Wizualne przykłady wpływu na przepływ
1. Przykład z pozycjonowaniem fixed:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Element stały</div>
<div class="content">Przewijalna zawartość
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Przykład z pozycjonowaniem sticky:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Element przylegający</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION