Ominaisuus position
määrittää tyypin elementille käytetty paikannusmenetelmä (staattinen, suhteellinen, kiinteä, absoluuttinen tai tahmea).
position
-ominaisuus määrittää elementille käytetyn paikannusmenetelmän tyypin.
On viisi erilaista sijaintiarvoa:
static
relative
fixed
absolute
sticky
Elementit sijoitetaan sitten käyttämällä ylä-, ala-, vasenta ja oikeaa ominaisuuksia. Nämä ominaisuudet eivät kuitenkaan toimi ilman sijaintia
ominaisuus asetetaan ensin. Ne toimivat myös eri tavalla asennosta riippuen arvo.
position: static;
HTML-elementit sijoitetaan oletusarvoisesti staattisiksi.
Staattisiin sijoitettuihin elementteihin eivät vaikuta ylä-, ala-, vasen- ja oikeanpuoleiset ominaisuudet.
Elementtiä, jossa on position: static;
, ei sijoiteta millään erityisellä tavalla. se on aina sivun normaalin kulun mukaan:
Tässä on käytetty CSS:
div.static {
position: static;
border: 3px solid #73AD21;
}
Kokeile itse →
<!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: suhteellisen;
Elementti, jossa on position: relation;
, sijoitetaan suhteessa normaalipaikkaansa.
Suhteellisen sijoitetun elementin ylä-, oikea-, ala- ja vasemmanpuoleisten ominaisuuksien asettaminen aiheuttaa se on säädettävä pois normaaliasennostaan. Muuta sisältöä ei mukauteta sopimaan mihinkään sivun jättämään aukkoon elementti.
Tässä on käytetty CSS:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
Kokeile itse →
<!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: kiinteä;
Elementti, jossa on position:fix;
, sijoitetaan suhteessa katseluporttiin, mikä tarkoittaa, että se on aina pysyy samassa paikassa, vaikka sivua vieritetään. Huippu, Oikea-, ala- ja vasen-ominaisuuksia käytetään elementin sijoittamiseen.
Kiinteä elementti ei jätä aukkoa sivulle, jossa se normaalisti olisi sijainnut.
Huomaa kiinteä elementti sivun oikeassa alakulmassa. Tässä on käytetty CSS:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
Kokeile itse →
<!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: absoluuttinen;
Elementti, jolla on position: absoluuttinen;
, sijoitetaan suhteessa lähimpään esi-isään (sen sijaan, että se olisi sijoitettu suhteessa katseluporttiin, kuten kiinteä).
Kuitenkin; jos absoluuttisesti sijoitetulla elementillä ei ole sijoitettuja esi-isiä, se käyttää asiakirjan runkoa ja liikkuu sivun vierityksen mukana.
Huomaa: Absoluuttiset sijoitetut elementit poistetaan normaalista virtauksesta, ja ne voivat mennä päällekkäin elementtien kanssa.
Tässä on yksinkertainen esimerkki:
Tässä on käytetty CSS:
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;
}
Kokeile itse →
<!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;
Elementti, jossa on position: sticky;
, sijoitetaan käyttäjän vierityspaikan perusteella.
Tahmea elementti vaihtaa suhteellisen
ja kiinteän
välillä vieritysasennosta riippuen. Se sijoitetaan suhteellisesti, kunnes tietty siirtymäkohta saavutetaan katseluportissa - sitten se "kiinni" paikoilleen (kuten position:fixed).
Huomaa: Internet Explorer ei tue tarttuvaa paikannusta. Safari vaatii -webkit- etuliite (katso esimerkki alla). Sinun on myös määritettävä vähintään yksi seuraavista: ylä
, oikea
, alhaalla
tai vasemmalla
tahmea asemointi töihin.
Tässä esimerkissä tahmea elementti kiinnittyy sivun yläosaan (ylä: 0
), kun saavut vierityskohtaan.
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Kokeile itse →
<!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>
Tekstin sijoittaminen kuvan päälle:
Kokeile itse:
Vasen yläkulma →
<!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>
Oikea yläkulma →
<!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>
Alhaalla vasemmalla →
<!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>
Alhaalla oikealla →
<!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>
Keskitetty →
<!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>
Tämä esimerkki osoittaa, kuinka elementin muoto asetetaan. Elementti leikataan tähän muotoon ja näytetään.
Aseta elementin muoto
<!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>
Asettaa sijoitetun laatikon alareunan
Leikkaa täysin sijoitetun elementin
Asettaa sijoitetun laatikon vasemman marginaalin reunan
Määrittää elementin paikannustyypin
Asettaa sijoitetun laatikon oikean marginaalin reunan
Asettaa sijoitetun laatikon yläreunan