Layout CSS - atrybut position
- Poprzednia strona CSS max-width
- Następna strona CSS z-index
position Właściwości określają typ metody lokalizacji elementu (staticzny, względny, stały, absolutny lub sticky).
Atrybut position
position Atrybut określa typ metody lokalizacji zastosowanej do elementu.
Istnieją pięć różnych wartości lokalizacji:
- static
- relative
- fixed
- absolute
- sticky
Elementy są rzeczywiście lokalizowane za pomocą atrybutów top, bottom, left i right. Ale, chyba że najpierw ustawiono atrybut position, te atrybuty nie będą działać. Według różnych wartości position, sposób ich działania różni się.
position: static;
Domyślnym sposobem lokalizacji HTML elementów jest static (statyczny).
Elementy z ustawioną lokalizacją statyczną są niezależne od atrybutów top, bottom, left i right.
Elementy z position: static; nie są lokalizowane w żaden specjalny sposób; zawsze są lokalizowane zgodnie z normalnym strumieniem strony:
To jest używany CSS:
przykład
div.static {
position: static;
height: 100px;
}
position: relative;
position: relative; elementów lokalizowanych względem ich normalnej pozycji.
Ustawienie atrybutów top, right, bottom i left dla elementów z ustawioną lokalizacją względną spowoduje, że będą one przesunięte od ich normalnej pozycji, aby dostosować się. Reszta treści nie zostanie dostosowana, aby dostosować się do miejsca pozostawionego przez element.
To jest używany CSS:
przykład
div.relative {
position: relative;
left: 30px;
height: 100px;
}
position: fixed;
position: fixed; Elementy są lokalizowane względem okna widoku, co oznacza, że nawet przy przewijaniu strony, zawsze pozostają na tym samym miejscu. Atrybuty top, right, bottom i left służą do lokalizacji tego elementu.
Elementy z ustawioną lokalizacją stałą nie zostawiają pustego miejsca w miejscu, gdzie zazwyczaj powinny być umieszczone na stronie.
Proszę zwrócić uwagę na ten stały element w prawym dolnym rogu strony. To jest używany CSS:
przykład
div.fixed {
position: fixed;
bottom: 0;
top: 80px;
width: 300px;
height: 100px;
}
position: absolute;
position: absolute; elementów względem najbliższego elementu przodka z ustawioną lokalizacją (zamiast względem okna widoku, jak w przypadku fixed).
Jednak, jeśli element o absolutnej lokalizacji nie ma przodka, użyje dokumentu głównego (body) i poruszy się razem ze stroną podczas przewijania.
uwaga:“Zlokalizowane” elementy to te, których pozycja static każdego innego elementu.
To jest prosty przykład:
To jest używany CSS:
przykład
div.relative {
position: relative;
width: 400px;
height: 200px;
height: 100px;
}
height: 200px;
position: absolute;
div.absolute {
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
position: sticky;
position: sticky; border: 3px solid #73AD21;
elementy przyczepne są umieszczane w stosunku do pozycji przewijania użytkownika.relative) i przyczepny (fixed) między nimi przełączać. Na początku jest umieszczany względnie, aż napotka pozycję przesuniętą w widoku - następnie jest 'przyczepiony' do odpowiedniej pozycji (np. position:fixed).
uwaga:Internet Explorer, Edge 15 i wcześniejsze wersje nie obsługują przyczepnej lokalizacji. Safari wymaga prefiksu -webkit- (zobacz poniższy przykład). Musisz również przynajmniej określić top,right,bottom lub left jednym z nich, aby przyczepna lokalizacja działała.
w tym przykładzie, gdy element sticky osiągnie swoją pozycję przewijania, pozostanie na górze strony (top: 0)
przykład
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
nachodzące się elementy
podczas umieszczania elementów, mogą one nachodzić się na inne elementy.
z-index atrybut określa kolejność nadkładania elementu (który element powinien być umieszczony przed innymi lub za innymi).
elementy mogą mieć pozytywną lub negatywną kolejność nadkładania:
to jest tytuł
ponieważ z-index obrazu wynosi -1, znajduje się za tekstem.
przykład
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
elementy o wyższym porządku nadkładania zawsze znajdują się przed elementami o niższym porządku nadkładania.
uwaga:jeśli dwa elementy umieszczane się nakładają, a nie są określone z-indexjeśli brak określenia, elementy umieszczane w dwóch miejscach będą pokazywane na górze.
umieszczanie tekstu w obrazie
jak umieścić tekst na obrazie:
przykład
spróbuj sam:
w lewym górnym rogu w prawym górnym rogu w lewym dolnym rogu w prawym dolnym rogu centrowany
więcej przykładów
- ustawienie kształtu elementu
- Ten przykład pokazuje, jak ustawić kształt elementu. Element jest przycięty do tego kształtu i wyświetlany.
wszystkie atrybuty CSS umieszczania
| atrybut | opis |
|---|---|
| bottom | ustaw dolny margines zewnętrzny ramki umieszczenia. |
| clip | Wycięcie elementów pozycjonowanych absolutnie. |
| left | Ustawianie lewej krawędzi zewnętrznej marginesu ramki pozycjonowanej. |
| position | Określenie typu pozycjonowania elementu. |
| right | Ustawianie prawej krawędzi zewnętrznej marginesu ramki pozycjonowanej. |
| top | Ustawianie górnej krawędzi zewnętrznej marginesu ramki pozycjonowanej. |
| z-index | Ustawianie kolejności układu elementów. |
Przeczytaj więcej
Dodatkowe książki:Przegląd pozycjonowania CSS
Dodatkowe książki:CSS pozycjonowanie względne
Dodatkowe książki:CSS pozycjonowanie absolutne
- Poprzednia strona CSS max-width
- Następna strona CSS z-index
