De top, bottom, leftoch rightegenskaper används med position för att ställa in placeringen av ett element. De har bara en effekt på placerade element, som är element med positionegenskapen inställd på något annat än static. Till exempel: relative, absolute, fixed, eller sticky.
div ( : || || auto || inherit; )Du kan till exempel använda den för att knuffa en ikon på plats:
button .icon ( position: relative; top: 1px; )Eller placera ett specialelement i en container.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Värdet för top, bottom, leftoch rightkan vara något av följande:
- någon av de giltiga längderna på CSS
- en procentandel av det innehållande elementets höjd (för
topochbottom) eller bredd (förleftochright) autoinherit
Elementet rör sig i allmänhet från en viss sida när dess värde är positivt och mot det när värdet är negativt. I exemplet nedan topflyttar en positiv längd för elementet neråt (bort från toppen) och en negativ längd för topelementet uppåt (mot toppen):
Se Pen
Top: positiva och negativa värden av Matsuko Friedland (@missmatsuko)
på CodePen.
Placera
Placeringen av ett element med ett värde för top, bottom, lefteller rightberor på dess värde för position. Låt oss ta en titt på vad som händer när vi ställer in samma värde för toppå element med olika värden för position.
static
Den topegenskapen har ingen effekt på unpositioned element (element med positioninställd på static). Så här placeras element som standard. Du kan använda position: static;som en metod för att ångra effekten av topett element.
relative
När topär inställt på ett element med positioninställt till relativekommer elementet att röra sig uppåt eller nedåt i förhållande till dess ursprungliga placering i dokumentet.
Se Pen
Top: släkting av Matsuko Friedland (@missmatsuko)
på CodePen.
absolute
När topär inställt på ett element med positioninställt till absolutekommer elementet att röra sig uppåt eller nedåt i förhållande till dess närmast placerade förfader (eller dokumentet, om det inte finns några placerade förfäder).
I denna demo placeras den rosa rutan till vänster 50 pixlar ner från början av sidan eftersom den inte har några förfäderelement. Den rosa rutan till höger är placerad 50 pixlar ner från toppen av sin förälder, eftersom föräldern har en positionav relative.
Se Pen
Top: absolut av Matsuko Friedland (@missmatsuko)
på CodePen.
fixed
När topär inställt på ett element med positioninställt till fixedkommer elementet att röra sig uppåt eller nedåt i förhållande till webbläsarens visningsområde.
Se Pen
Top: fixad av CSS-Tricks (@ css-tricks)
på CodePen.
Vid första anblicken kan det verka som om det inte finns någon skillnad mellan absoluteoch fixed. Skillnaden kan ses när du jämför dem på en sida som har tillräckligt med innehåll för att bläddra. När du rullar ner är fixedpositionselementet alltid synligt medan absolutepositionselementet rullar bort.
Se Pen
Scrolling: fast kontra absolut av CSS-Tricks (@ css-tricks)
på CodePen.
sticky
När topär inställt på ett element med positioninställt till stickykommer elementet att röra sig uppåt eller nedåt i förhållande till närmaste förfader med en rullningsruta (eller visningsområdet, om ingen förfader har en rullningsruta), begränsad till gränserna för dess innehållande element.
Att ställa in topett stickyplacerat element gör inte mycket om inte behållaren är högre än den är, och du har tillräckligt med innehåll för att bläddra. Som med fixedkommer elementet att vara synligt när du rullar. Till skillnad fixedfrån att elementet faller ur sikte när det når kanterna på det innehållande elementet.
Se Pen
Scrolling: fixed vs. sticky av CSS-Tricks (@ css-tricks)
på CodePen.
Gotchas
Ställer in motsatta sidor
Du kan ställa in ett värde för var och en av top, bottom, leftoch rightpå ett enda element. När du ställer in värden för motsatta sidor ( topoch bottom, eller leftoch right) kanske resultatet inte alltid blir det du förväntar dig.
I de flesta fall bottomignoreras om det topredan är inställt och rightignoreras om det leftredan är inställt. När riktningen är inställd på rtl(höger till vänster) leftignoreras istället för right. För att varje värde ska ha en effekt måste elementet ha en positionuppsättning till absoluteeller fixedoch heightinställd på auto(standard).
I detta exempel sätter vi top, bottom, left, och righttill `20px`, och förvänta sig varje sida av den inre rutan för att vara 20px bort från sidorna av den yttre lådan:
Se
penninställningen uppe, nere, vänster och höger av CSS-Tricks (@ css-tricks)
på CodePen.
När fixad är inte relativt visningsområdet
Element som är positioninställda på fixedär inte alltid placerade i förhållande till visningsområdet. Den kommer att placeras relativt sin närmaste förfader med a transform, perspectiveeller filteregendom inställd på något annat än noneom det finns.
Lägga till eller ta bort utrymme
Om du har placerat ett element och upptäckt att det nu finns ett tomt utrymme eller inte tillräckligt med utrymme där du förväntade dig, kan det ha att göra med om elementet befinner sig i eller utanför dokumentets flöde.
När ett element tas ut ur dokumentets flöde betyder det att det utrymme som det ursprungligen tog på sidan försvinner. Detta är fallet när ett element är placerat absoluteeller fixed. I det här exemplet har den ruta som innehåller det absolut placerade elementet kollapsat eftersom det absolut placerade elementet togs bort från dokumentflödet:
Se
penndokumentflödet av Matsuko Friedland (@missmatsuko)
på CodePen.
Webbläsarstöd
Du kan ta en titt, men det finns inga problem mellan webbläsare för topfastigheten. Använd efter behag.