CSS-Layout – Die Positionseigenschaft


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die Eigenschaft position gibt den Typ an Positionierungsmethode für ein Element (statisch, relativ, fest, absolut oder). klebrig).


Die Positionseigenschaft

Die Eigenschaft position gibt den Typ der Positionierungsmethode an, die für ein Element verwendet wird.

Es gibt fünf verschiedene Positionswerte:

static
relative
fixed
absolute
sticky

Die Elemente werden dann oben, unten, links und rechts positioniert Eigenschaften. Diese Eigenschaften funktionieren jedoch nur, wenn die Position Die Eigenschaft wird zuerst festgelegt. Sie funktionieren auch je nach Position unterschiedlich Wert.


CSS-Eigenschaft position: static;

HTML-Elemente werden standardmäßig statisch positioniert.

Statisch positionierte Elemente werden von den Eigenschaften „oben“, „unten“, „links“ und „rechts“ nicht beeinflusst.

Ein Element mit position: static; wird nicht auf besondere Weise positioniert; es ist immer entsprechend dem normalen Seitenfluss positioniert:

This <div> element has position: static;

Hier ist das verwendete CSS:

Beispiel

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

Probieren Sie es selbst aus →

<!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-Eigenschaft position: relative;

Ein Element mit position: relative; wird relativ zu seiner normalen Position positioniert.

Das Festlegen der Eigenschaften „oben“, „rechts“, „unten“ und „links“ eines relativ positionierten Elements führt dazu Es muss aus seiner normalen Position heraus verstellt werden. Andere Inhalte werden nicht angepasst, um in die Lücken zu passen, die durch die entstehen Element.

This <div> element has position: relative;

Hier ist das verwendete CSS:

Beispiel

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

Probieren Sie es selbst aus →

<!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-Eigenschaft position: behoben;

Ein Element mit position: behoben; wird relativ zum Ansichtsfenster positioniert, also immer bleibt an der gleichen Stelle, auch wenn die Seite gescrollt wird. Die Spitze, Die Eigenschaften „right“, „bottom“ und „left“ werden zum Positionieren des Elements verwendet.

Ein festes Element hinterlässt keine Lücke auf der Seite, wo es normalerweise platziert wäre.

Beachten Sie das feste Element in der unteren rechten Ecke der Seite. Hier ist das verwendete CSS:

Beispiel

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

Probieren Sie es selbst aus →

<!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-Eigenschaft position: absolute;

Ein Element mit position: absolute; wird relativ zum nächstgelegenen positionierten Vorfahren positioniert (anstatt relativ zum Ansichtsfenster positioniert zu sein, wie z. B. fest).

Jedoch; wenn ein absolut positioniertes Element keine positionierten Vorfahren hat, Es verwendet den Dokumenttext und bewegt sich beim Scrollen der Seite mit.

Hinweis: Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können Elemente überlappen.

Hier ist ein einfaches Beispiel:

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

Hier ist das verwendete CSS:

Beispiel

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

Probieren Sie es selbst aus →

<!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-Eigenschaft position: sticky;

Ein Element mit position: sticky; wird basierend auf der Scrollposition des Benutzers positioniert.

Ein Sticky-Element wechselt je nach Scrollposition zwischen relativ und fest. Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht wird - dann „klebt“ es an Ort und Stelle (wie position:fixed).

Hinweis:Internet Explorer unterstützt keine Sticky-Positionierung. Safari erfordert ein -Webkit- Präfix (siehe Beispiel unten). Sie müssen außerdem mindestens eines von top, right und angeben unten oder links für klebrige Positionierung, um zu funktionieren.

In diesem Beispiel bleibt das Sticky-Element am oberen Rand der Seite hängen (top: 0), wenn Sie seine Scroll-Position erreichen.

Beispiel

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

Probieren Sie es selbst aus →

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



Text in einem Bild positionieren

So positionieren Sie Text über einem Bild:

Beispiel

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Versuch es selber:

Oben links →

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


Oben rechts →

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


Unten links →

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


Unten rechts →

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


Zentriert →

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



Mehr Beispiele

Dieses Beispiel zeigt, wie die Form eines Elements festgelegt wird. Das Element wird in diese Form zugeschnitten und angezeigt.

Legen Sie die Form eines Elements fest

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




Alle CSS-Positionierungseigenschaften

bottom

Legt die untere Randkante für ein positioniertes Feld fest

clip

Knipst ein absolut positioniertes Element

left

Legt die linke Randkante für ein positioniertes Feld fest

position

Gibt die Art der Positionierung für ein Element an

right

Legt die rechte Randkante für ein positioniertes Feld fest

top

Legt die obere Randkante für ein positioniertes Feld fest