Definition und Verwendung
Das Positionsattribut gibt den Positionierungstyp des Elements an.
Beschreibung
Dieses Attribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt.
默认值: | static |
---|---|
继承性: | no |
版本: | CSS2 |
JavaScript 语法: | object.style.position="absolute" |
Beispiel
H2-Elemente positionieren:
h2 { position:absolute; left:100px; top:150px; } TIY
Browser-Unterstützung
Alle gängigen Browser unterstützen das Positionsattribut.
Hinweis: Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.
Mögliche Werte
TIY-Beispiel
Wert | Beschreibung | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
absolut |
-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben. |
||||||||||||
behoben |
Generieren Sie ein absolut positioniertes Element, das relativ zum Browserfenster positioniert ist. Die Position des -Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben. |
||||||||||||
relativ |
Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Also fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu. |
||||||||||||
statisch | Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen). | ||||||||||||
erben | gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll. |
Positionierung: Relative Positionierung Dieses Beispiel zeigt, wie ein Element relativ zu seiner normalen Position positioniert wird. Positionierung: Absolute Positionierung Dieses Beispiel zeigt, wie ein Element mithilfe absoluter Werte positioniert wird. Positionierung: Feste Positionierung Dieses Beispiel zeigt, wie ein Element relativ zum Browserfenster positioniert wird. Festlegen der Form eines Elements Dieses Beispiel zeigt, wie die Form eines Elements festgelegt wird. Das Element wird in die Form eingeschnitten und angezeigt. Z-indexZ-index kann verwendet werden, um ein Element hinter einem anderen Element zu platzieren. Z-Index Der Z-Index des Elements im obigen Beispiel wurde geändert.
Lassen Sie mich Ihnen das Positionsattribut in CSS vorstellen
CSS-Position ist sehr wichtig und hat die folgenden Werte: statisch, relativ, absolut, fest.
<div style="position: relative;"> <div style="position: absolute; top: 10px; left: 10px;"></div> </div>