Die Eigenschaft position
gibt den Typ an Positionierungsmethode für ein Element (statisch, relativ, fest, absolut oder). klebrig).
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.
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:
Hier ist das verwendete CSS:
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>
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.
Hier ist das verwendete CSS:
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>
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:
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>
position: fixed;
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:
Hier ist das verwendete 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;
}
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>
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.
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>
So positionieren Sie Text über einem Bild:
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>
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>
Legt die untere Randkante für ein positioniertes Feld fest
Knipst ein absolut positioniertes Element
Legt die linke Randkante für ein positioniertes Feld fest
Gibt die Art der Positionierung für ein Element an
Legt die rechte Randkante für ein positioniertes Feld fest
Legt die obere Randkante für ein positioniertes Feld fest