1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
title: position
slug: Web/CSS/position
tags:
- CSS
- CSS Eigenschaft
- CSS Positionierung
- Referenz
translation_of: Web/CSS/position
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>position</code> Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften <a href="/De/CSS/Top" title="de/CSS/top"><code>top</code></a>, <a href="/De/CSS/Right" title="de/CSS/right"><code>right</code></a>, <a href="/De/CSS/Bottom" title="de/CSS/bottom"><code>bottom</code></a> oder <a href="/De/CSS/Left" title="de/CSS/left"><code>left</code></a> verwendet.</p>
<p>Ein <em>positioniertes Element</em> ist ein Element für das <code>absolute</code>, <code>fixed</code> oder <code>relative</code> als <code>position</code> definiert wurde.<br>
Ein <em>absolut positioniertes Element</em> ist ein Element für das <code>absolute</code> oder <code>fixed</code> als <code>position</code> definiert wurde.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
{{csssyntax}}
<h3 id="Werte">Werte</h3>
<dl>
<dt>static</dt>
<dd>Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften <code>top</code>, <code>right</code>, <code>bottom</code> oder <code>left</code> haben keine Auswirkungen.</dd>
<dt>relative</dt>
<dd>Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei <code> table-*-group</code>,<code> table-row</code>,<code> table-column</code>,<code> table-cell</code>, und<code> table-caption </code>Elementen ist kein Effekt definiert.</dd>
<dt>absolute</dt>
<dd>Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.</dd>
<dt>sticky {{Experimental_inline}}</dt>
<dd>Eine Mischung zwischen <code>fixed</code> und <code>relative</code>: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.</dd>
<dt>fixed</dt>
<dd>Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf <em>jeder Seite</em> an der positionierten Stelle angezeigt.</dd>
<dt>inherit</dt>
<dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<p>Das folgende Beispiel verdeutlicht den Unterschied zwischen <code>position: absolute</code> und <code>position: fixed</code>. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit <code>fixed</code> positionierte Element fest an seiner Position.</p>
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Position absolute und fixed</title>
<style type="text/css">
p {font-size:30px; line-height:3em;}
div.pos {width:49%; text-align:center; border:2px solid #00f;}
div#abs {position:absolute; bottom:0; left:0;}
div#fix {position:fixed; bottom:0; right:0;}
</style>
</head>
<body>
<p>This<br>is<br>some<br>tall,<br>tall,
<br>tall,<br>tall,<br>tall<br>content.</p>
<div id="fix" class="pos"><p>Fixed</p></div>
<div id="abs" class="pos"><p>Absolute</p></div>
</body>
</html>
</pre>
<h2 id="Specifications" name="Specifications">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Anmerkung</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS3 Positioning')}}</td>
<td>{{Spec2('CSS3 Positioning')}}</td>
<td><code>sticky</code> hinzugefügt</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
<p>{{Compat("css.properties.position")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/De/CSS/Top" title="de/CSS/top"><code>top</code></a>, <a href="/De/CSS/Left" title="de/CSS/left"><code>left</code></a>, <a href="/De/CSS/Bottom" title="de/CSS/bottom"><code>bottom</code></a>, <a href="/De/CSS/Right" title="de/CSS/right"><code>right</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/position", "fr": "fr/CSS/position", "es": "es/CSS/position" } ) }}</p>
|
