Lokalizacja absolutna CSS
- Poprzednia strona Lokalizacja względna CSS
- Następna strona Przepływowanie CSS
Kwadrat ramki elementu ustawionego na absolutne pozycjonowanie jest całkowicie usunięty z strumienia dokumentu i pozycjonowany względem jego bloku zawierającego, który może być innym elementem w dokumencie lub pierwotnym blokiem zawierającym. Przestrzeń zajmowana przez element w normalnym strumieniu zostaje zamknięta, jakby element nigdy nie istniał. Po pozycjonowaniu element tworzy blokowy ramkę, niezależnie od tego, jakiego typu ramkę tworzył w normalnym strumieniu.
Lokalizacja absolutna CSS
Absolutne pozycjonowanie niezależne jest od strumienia dokumentu, więc elementy nie zajmują miejsca. Różni się to od pozycjonowania względnego, które jest częścią modelu pozycjonowania normalnego strumienia, ponieważ pozycja elementu jest względna do jego pozycji w normalnym strumieniu.
Innym elementom w normalnym strumieniu przestrzeń zajmowana przez elementy absolutnie pozycjonowane jest traktowana jakby nie istniały:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
jak pokazane na rysunku poniżej:
Pozycja elementu absolutnie lokalizowanego jest względna donajbliższego zdefiniowanego przodka, jeśli element nie ma zdefiniowanego przodka, jego pozycja jest względna doPierwsza zawartość.
Głównym problemem lokalizacji jest pamiętanie znaczenia każdego rodzaju lokalizacji. Więc, teraz pozwólcie, że przypomnimy sobie, czego nauczyliśmy się: lokalizacja względna jest "w stosunku do" początkowej pozycji elementu w dokumencie, podczas gdy lokalizacja absolutna jest "w stosunku do" najbliższego zdefiniowanego przodka, jeśli nie istnieje zdefiniowany przodek, to "w stosunku do" pierwszej zawartości.
Komentarz:W zależności od agenta użytkownika, pierwsza zawartość zawiera może być rysunek lub element HTML.
Wskazówka:Ponieważ ramy absolutne są niezależne od strumienia dokumentu, mogą one zakrywać inne elementy na stronie. Można to osiągnąć poprzez ustawienie Atrybut z-indexAby kontrolować kolejność układania tych ram
Przykład absolutnej lokalizacji CSS
- Lokalizacja: lokalizacja absolutna
- Ten przykład pokazuje, jak używać wartości absolutnych do lokalizacji elementów.
- Poprzednia strona Lokalizacja względna CSS
- Następna strona Przepływowanie CSS
