Bottom: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Ingen redigeringssammanfattning
 
(2 mellanliggande sidversioner av samma användare visas inte)
Rad 3: Rad 3:
För <code>absolute</code>-positionering anger <code>bottom</code> hur långt det ska vara mellan nuvarande elements bottenkant och föräldraelementets bottenkant. Det går att ange ett negativt värde och då hamnar elementet under föräldraelementet.
För <code>absolute</code>-positionering anger <code>bottom</code> hur långt det ska vara mellan nuvarande elements bottenkant och föräldraelementets bottenkant. Det går att ange ett negativt värde och då hamnar elementet under föräldraelementet.


För <code>absolute</code>-positionering anger <code>bottom</code> hur långt det ska vara mellan nuvarande elements toppkant och föräldraelementets toppkant. Det går att ange ett negativt värde och då hamnar elementet till ovanför föräldraelementet.
För <code>absolute</code>-positionering anger <code>bottom</code> hur långt det ska vara mellan nuvarande elements bottenkant och föräldraelementets bottenkant. Det går att ange ett negativt värde och då hamnar elementet till ovanför föräldraelementet.


Vid <code>fixed</code>-positionering fungerar <code>bottom</code> i stort sett som ovanstående, men istället för att vara relativt till föräldraelementet, sker positioneringen i relation till webbläsarfönstret. Lägg märke till att <code>fixed</code> inte fungerar på alla typer av enheter.
Vid <code>fixed</code>-positionering fungerar <code>bottom</code> i stort sett som ovanstående, men istället för att vara relativt till föräldraelementet, sker positioneringen i relation till webbläsarfönstret. Lägg märke till att <code>fixed</code> inte fungerar på alla typer av enheter.
Rad 30: Rad 30:


== Exempel ==
== Exempel ==
<codepen pen="MwMBow" height="400" tab="css">
<codepen pen="MwMBow" height="500" tab="css,result">
</codepen>
</codepen>


== Egenskapens definition ==
== Egenskapens definition ==
http://www.w3.org/TR/CSS2/visuren.html#propdef-bottom
http://www.w3.org/TR/CSS2/visuren.html#propdef-bottom

Nuvarande version från 30 januari 2019 kl. 15.59

bottom används för att positionera element och anger positionen på bottens yttersta marginalkant. Beroende på vilken typ av positionering som gäller för elementet, fungerar bottom lite olika (för mer info om positionering gå till positionering).

För absolute-positionering anger bottom hur långt det ska vara mellan nuvarande elements bottenkant och föräldraelementets bottenkant. Det går att ange ett negativt värde och då hamnar elementet under föräldraelementet.

För absolute-positionering anger bottom hur långt det ska vara mellan nuvarande elements bottenkant och föräldraelementets bottenkant. Det går att ange ett negativt värde och då hamnar elementet till ovanför föräldraelementet.

Vid fixed-positionering fungerar bottom i stort sett som ovanstående, men istället för att vara relativt till föräldraelementet, sker positioneringen i relation till webbläsarfönstret. Lägg märke till att fixed inte fungerar på alla typer av enheter.

Vid relative-positionering anger bottom utgår webbläsaren ifrån den position där element egentligen skulle hamnat (om ingen positionering gällt) och förflyttar elementet relativt till denna position.

Egenskaper

Parametrar <längdmått> | auto | inherit
Defaultvärde auto
Ärvs? Nej
Animerbart? Ja
Fungerar med... Positionerade element

Parametern längdmått kan vara angiven i vilken som helst av alla de tillgängliga CSS-måttenheter. Om man använder procent, utgår webbläsaren ifrån höjdenföräldraelementet!

Exempel

See the Pen MwMBow by Patrik Grip-Jansson (@PGJ) on CodePen.

Egenskapens definition

http://www.w3.org/TR/CSS2/visuren.html#propdef-bottom