Na top, bottom, lefti rightwłaściwości są wykorzystywane stanie ustalić położenie elementu. Mają wpływ tylko na pozycjonowane elementy, które są elementami z positionwłaściwością ustawioną na cokolwiek innego niż static. Na przykład: relative, absolute, fixed, lub sticky.
div ( : || || auto || inherit; )Możesz go użyć na przykład do przesunięcia ikony na miejsce:
button .icon ( position: relative; top: 1px; )Lub umieść specjalny element w pojemniku.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Wartość top, bottom, left, i rightmoże być dowolna z poniższych sytuacji:
- dowolna z prawidłowych długości CSS
- procent wysokości elementu zawierającego (dla
topibottom) lub szerokości (dlaleftiright) autoinherit
Element będzie na ogół odsuwał się od danej strony, gdy jego wartość jest dodatnia, i do niej, gdy wartość jest ujemna. W poniższym przykładzie dodatnia długość topprzesuwa element w dół (od góry), a ujemna długość topprzesuwa element w górę (w górę):
Zobacz Pen
Top: wartości dodatnie i ujemne autorstwa Matsuko Friedlanda (@missmatsuko)
na CodePen.
Pozycja
Umieszczenie elementu z wartością top, bottom, left, lub rightzależy cena position. Przyjrzyjmy się, co się stanie, gdy ustawimy tę samą wartość dla topelementów z różnymi wartościami dla position.
static
topNieruchomość nie ma wpływu na elementy unpositioned (elementy z positionzestawu do static). W ten sposób elementy są domyślnie pozycjonowane. Możesz użyć position: static;jako jednej metody, aby cofnąć efekt topna elemencie.
relative
Gdy topjest ustawiony na elemencie z positionustawieniem na relative, element przesunie się w górę lub w dół w stosunku do jego pierwotnego położenia w dokumencie.
Zobacz Pen
Top: krewny Matsuko Friedlanda (@missmatsuko)
na CodePen.
absolute
Gdy topjest ustawiony na elemencie z positionustawieniem na absolute, element przesunie się w górę lub w dół w stosunku do swojego najbliższego przodka (lub dokumentu, jeśli nie ma żadnych przodków).
W tym pokazie różowe pole po lewej stronie jest umieszczone 50 pikseli w dół od góry strony, ponieważ nie ma umieszczonych elementów nadrzędnych. Różowe pole po prawej stronie jest umieszczone 50 pikseli w dół od góry swojego rodzica, ponieważ rodzic ma positionof relative.
Zobacz Pen
Top: Absolut autorstwa Matsuko Friedlanda (@missmatsuko)
na CodePen.
fixed
Gdy topjest ustawiony na elemencie z positionustawieniem na fixed, element przesunie się w górę lub w dół w stosunku do rzutni przeglądarki.
Zobacz Pen
Top: naprawione przez CSS-Tricks (@ css-tricks)
w CodePen.
Na pierwszy rzut oka może się wydawać, że nie ma różnicy między absolutei fixed. Różnicę można zauważyć, porównując je na stronie, której zawartość można przewijać. Podczas przewijania w dół fixedelement pozycji jest zawsze widoczny, a absoluteelement pozycji jest przewijany.
Zobacz
przewijanie piórem : naprawione vs. bezwzględne przez CSS-Tricks (@ css-tricks)
w CodePen.
sticky
Gdy topjest ustawiony na elemencie z positionustawieniem na sticky, element przesunie się w górę lub w dół w stosunku do najbliższego przodka z przewijanym polem (lub rzutnią, jeśli żaden przodek nie ma przewijanego pola), ograniczony do granic elementu zawierającego go.
Ustawienie topna stickyelementu pozycjonowanego nie robi wiele, chyba że pojemnik jest wyższy, niż jest, i masz wystarczająco dużo treści do przewijania. Podobnie jak w przypadku fixed, element pozostanie widoczny podczas przewijania. W przeciwieństwie do fixedtego element zniknie z widoku, gdy dotrze do krawędzi elementu zawierającego go.
Zobacz
przewijanie piórem : naprawione vs. lepkie przez CSS-Tricks (@ css-tricks)
w CodePen.
Gotchas
Ustawienie przeciwnych stron
Można ustawić wartość dla każdego top, bottom, lefti rightna jednym elemencie. Po ustawieniu wartości dla przeciwnych stron ( topi bottom, lub lefti right) wynik może nie zawsze być taki, jakiego oczekujesz.
W większości przypadków bottomjest ignorowane, jeśli topjest już ustawione, i rightjest ignorowane, jeśli leftjest już ustawione. Gdy kierunek jest ustawiony na rtl(od prawej do lewej), leftjest ignorowany zamiast right. Aby każda wartość miała wpływ, element musi mieć positionustawioną wartość absolutelub fixedi heightustawioną na auto(domyślnie).
W tym przykładzie, zestaw top, bottom, lefti rightna `20px` i od każdego boku pudełka wewnętrznego 20 pikseli być oddalony od boków pudełka zewnętrznego:
Zobacz ustawienia pióra u
góry, u dołu, po lewej i po prawej stronie CSS-Tricks (@ css-tricks)
w CodePen.
Gdy naprawiono, nie jest zależne od rzutni
Elementy z positionustawieniem na fixednie zawsze są ustawione w stosunku do rzutni. Zostanie ona umieszczona w stosunku do swojego najbliższego przodka z transform, perspectivelub filterzestawu właściwości do niczego innego niż none, jeśli taki istnieje.
Dodawanie lub usuwanie miejsca
Jeśli umieściłeś element i odkryłeś, że jest teraz puste miejsce lub za mało miejsca tam, gdzie się spodziewałeś, może to mieć związek z tym, czy element znajduje się w przepływie dokumentu, czy poza nim.
Usunięcie elementu z obiegu dokumentu oznacza, że miejsce, które pierwotnie zajmował na stronie, znika. Dzieje się tak, gdy element jest pozycjonowany absolutelub fixed. W tym przykładzie pole zawierające element pozycjonowany absolutnie zostało zwinięte, ponieważ element pozycjonowany absolutnie został usunięty z przepływu dokumentu:
Zobacz
przepływ dokumentów pióra autorstwa Matsuko Friedlanda (@missmatsuko)
na CodePen.
Wsparcie przeglądarki
Możesz rzucić okiem, ale nie ma problemów z różnymi przeglądarkami dotyczącymi tej usługi top. Używaj do woli.