CSS-elrendezés – A pozíciótulajdonság

Tartalomjegyzék

A position tulajdonság határozza meg a típusát elemhez használt pozicionálási módszer (statikus, relatív, rögzített, abszolút ill ragadós).

A pozíció Tulajdon

A position tulajdonság megadja az elemhez használt pozicionálási módszer típusát.

Öt különböző pozícióérték létezik:

static
relative
fixed
absolute
sticky

Ezután az elemeket a felső, az alsó, a bal és a jobb oldal segítségével helyezzük el tulajdonságait. Ezek a tulajdonságok azonban csak a pozíció esetén működnek tulajdonság van először beállítva. A pozíciótól függően eltérően is működnek érték.

CSS tulajdonság `position: static;`

A HTML elemek alapértelmezés szerint statikusan vannak elhelyezve.

A statikusan elhelyezett elemeket nem befolyásolják a felső, alsó, bal és jobb oldali tulajdonságok.

A pozíció: static; elemet nem helyezzük el semmilyen különleges módon; ez mindig az oldal normál menetének megfelelően helyezve el:

This <div> element has position: static;

Íme a használt CSS:

Példa

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Próbálja ki Ön is →

<!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-tulajdonság `pozíció: relatív;`

A position: relatív; elemet a rendszer a normál pozíciójához viszonyítva helyezi el.

Egy viszonylag pozícionált elem felső, jobb, alsó és bal tulajdonságainak beállítása ezt okozza el kell állítani a normál helyzetétől. A többi tartalmat nem módosítjuk úgy, hogy beleférjen az általa hagyott résbe elem.

This <div> element has position: relative;

Íme a használt CSS:

Példa

div.relative {
  position: relative;
  
left: 30px;
  border: 3px solid #73AD21;
}

Próbálja ki Ön is →

<!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 tulajdonság `pozíció: rögzített;`

A position:fix; elemet a nézetablakhoz képest helyezik el, ami azt jelenti, hogy mindig az oldal görgetése esetén is ugyanazon a helyen marad. A csúcs, A jobb, alsó és bal tulajdonságok az elem elhelyezésére szolgálnak.

A rögzített elem nem hagy rést az oldalon, ahol normálisan elhelyezett volna.

Figyelje meg a rögzített elemet az oldal jobb alsó sarkában. Íme a használt CSS:

Példa

div.fixed {
  position: fixed;
  
bottom: 0;
  right: 0;
  width: 
300px;
  border: 3px solid #73AD21;
}

Próbálja ki Ön is →

<!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 tulajdonság `position: abszolút;`

A position: abszolút; elemet a legközelebbi pozicionált őshöz viszonyítva helyezzük el (ahelyett, hogy a nézetablakhoz viszonyítva helyeznénk el, például rögzített).

Azonban; ha egy abszolút pozicionált elemnek nincsenek elhelyezett ősei, a dokumentum törzsét használja, és az oldalgörgetéssel együtt mozog.

Megjegyzés: Az abszolút pozicionált elemek kikerülnek a normál áramlásból, és átfedhetik az elemeket.

Íme egy egyszerű példa:

This <div> element has position: relative;

This <div> element has position: absolute;

Íme a használt CSS:

Példa

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;
}

Próbálja ki Ön is →

<!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 tulajdonság `position: sticky;`

A position: sticky; elemet a felhasználó görgetési pozíciója alapján helyezik el.

A ragadós elem a görgetés helyétől függően vált a relatív és a rögzített között. Relatívan pozícionálva van addig, amíg egy adott eltolási pozíció el nem éri a nézetablakot - ezután "ragad" a helyére (mint például pozíció:fix).

Megjegyzés: Az Internet Explorer nem támogatja a ragadós pozicionálást. A Safarihoz -webkit- szükséges előtag (lásd az alábbi példát). Ezenkívül meg kell adnia a felső, jobbra, legalább egyet alul vagy balra for ragadós pozicionálás a munkához.

Ebben a példában a ragadós elem az oldal tetejéhez ragad (top: 0), amikor eléri a görgetési pozícióját.

Példa

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: 
  sticky;
  top: 0;
  background-color: green;
  
  border: 2px solid #4CAF50;
}

Próbálja ki Ön is →

<!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>

Szöveg elhelyezése egy képen

Szöveg elhelyezése a kép felett:

Példa

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Próbáld ki magad:

Bal felső →

<!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>

Jobbra fent →

<!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>

Balra lent →

<!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>

Jobbra lent →

<!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>

Középre igazított →

<!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>

További példák

Ez a példa bemutatja, hogyan kell beállítani egy elem alakját. Az elem ebbe az alakzatba lesz vágva, és megjelenik.

Állítsa be egy elem alakját

<!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>

Minden CSS pozicionálási tulajdonság

bottom: Beállítja az alsó margó szélét egy elhelyezett dobozhoz
clip: Abszolút elhelyezett elemet vág le
left: Beállítja a bal margó szélét egy elhelyezett dobozhoz
position: Meghatározza az elem elhelyezésének típusát
right: Beállítja a jobb margó szélét egy elhelyezett dobozhoz
top: Beállítja a felső margó szélét egy elhelyezett dobozhoz

CSS-elrendezés – A pozíciótulajdonság

Tartalomjegyzék

A pozíció Tulajdon

CSS tulajdonság position: static;

Példa

CSS-tulajdonság pozíció: relatív;

Példa

CSS tulajdonság pozíció: rögzített;

Példa

CSS tulajdonság position: abszolút;

Példa

CSS tulajdonság position: sticky;

Példa

Szöveg elhelyezése egy képen

Példa

További példák

Minden CSS pozicionálási tulajdonság

CSS tulajdonság `position: static;`

CSS-tulajdonság `pozíció: relatív;`

CSS tulajdonság `pozíció: rögzített;`

CSS tulajdonság `position: abszolút;`

CSS tulajdonság `position: sticky;`