Egenskapen position
anger typen av positioneringsmetod som används för ett element (statisk, relativ, fix, absolut eller klibbig).
Egenskapen position
anger vilken typ av positioneringsmetod som används för ett element.
Det finns fem olika positionsvärden:
static
relative
fixed
absolute
sticky
Elementen placeras sedan med toppen, botten, vänster och höger egenskaper. Dessa egenskaper kommer dock inte att fungera om inte positionen
egenskapen sätts först. De fungerar också olika beroende på befattning värde.
position: static;
HTML-element placeras statiskt som standard.
Statiskt placerade element påverkas inte av egenskaperna för topp, botten, vänster och höger.
Ett element med position: static;
är inte placerat på något speciellt sätt; det är alltid placerad enligt det normala flödet på sidan:
Här är CSS som används:
div.static {
position: static;
border: 3px solid #73AD21;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
position: relativ;
Ett element med position: relative;
är placerat relativt sin normala position.
Att ställa in egenskaperna för topp, höger, botten och vänster för ett relativt placerat element kommer att orsaka den ska justeras bort från sitt normala läge. Annat innehåll kommer inte att justeras för att passa in i någon lucka som lämnas av element.
Här är CSS som används:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
position: fixed;
Ett element med position: fixed;
är placerat i förhållande till viewporten, vilket betyder att det alltid stannar på samma plats även om sidan rullas. Toppen, höger, botten och vänster egenskaper används för att placera elementet.
Ett fast element lämnar inte ett mellanrum på sidan där det normalt skulle ha varit placerat.
Lägg märke till det fasta elementet i det nedre högra hörnet på sidan. Här är CSS som används:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
position: fixed;
position: absolute;
Ett element med position: absolute;
är placerat i förhållande till närmaste positionerade förfader (istället för att placeras i förhållande till visningsporten, som fast).
Dock; om ett absolut positionerat element inte har några positionerade förfäder, den använder dokumentets brödtext och flyttas tillsammans med sidrullning.
Obs! Absolut placerade element tas bort från det normala flödet och kan överlappa element.
Här är ett enkelt exempel:
Här är CSS som används:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute; top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
position: sticky;
Ett element med position: sticky;
är placerat baserat på användarens rullningsposition.
Ett sticky element växlar mellan relativ
och fixed
, beroende på rullningspositionen. Den placeras relativt tills en given förskjuten position uppnås i visningsporten - då "fastnar" den på plats (som position:fixed).
Obs! Internet Explorer stöder inte klibbig positionering. Safari kräver ett -webkit- prefix (se exempel nedan). Du måste också ange minst en av top
, höger
, botten
eller vänster
för klibbig positionering för att fungera.
I det här exemplet fastnar det klibbiga elementet överst på sidan (överst: 0
), när du når sin rullningsposition.
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
Så här placerar du text över en bild:
Prova själv:
Överst till vänster →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
Överst till höger →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
Nederst till vänster →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>
Nederst till höger →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>
Centrerad →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>
Det här exemplet visar hur man ställer in formen på ett element. Elementet klipps in i denna form och visas.
Ställ in formen på ett element
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>
Ställer in den nedre marginalkanten för en placerad ruta
Klipper ett absolut placerat element
Ställer in den vänstra marginalkanten för en placerad ruta
Anger typen av positionering för ett element
Ställer in den högra marginalkanten för en placerad ruta
Ställer in den övre marginalkanten för en placerad ruta