CSS-asettelu – sijaintiominaisuus


Sisällysluettelo

    Näytä sisällysluettelo


Ominaisuus position määrittää tyypin elementille käytetty paikannusmenetelmä (staattinen, suhteellinen, kiinteä, absoluuttinen tai tahmea).


Omaisuuden sijainti

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.


CSS-ominaisuus 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:

This <div> element has position: static;

Tässä on käytetty CSS:

Esimerkki

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>



CSS-ominaisuus 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.

This <div> element has position: relative;

Tässä on käytetty CSS:

Esimerkki

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>




CSS-ominaisuus 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:

Esimerkki

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>


This <div> element has position: fixed;

CSS-ominaisuus 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:

This <div> element has position: relative;
This <div> element has position: absolute;

Tässä on käytetty CSS:

Esimerkki

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>



CSS-ominaisuus 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.

Esimerkki

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 kuvaan

Tekstin sijoittaminen kuvan päälle:

Esimerkki

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

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>



Lisää esimerkkejä

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>




Kaikki CSS-paikannusominaisuudet

bottom

Asettaa sijoitetun laatikon alareunan

clip

Leikkaa täysin sijoitetun elementin

left

Asettaa sijoitetun laatikon vasemman marginaalin reunan

position

Määrittää elementin paikannustyypin

right

Asettaa sijoitetun laatikon oikean marginaalin reunan

top

Asettaa sijoitetun laatikon yläreunan