Korrigieren Sie die Position einer Ebene, indem Sie das Positionsattribut in den CSS_javascript-Tipps festlegen

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

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

Erzeugt ein absolut positioniertes Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist.

Die Position des

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

Statisch: Statische Positionierung. Wenn Sie das Positionsattribut nicht festlegen, ist der Standardwert statisch. Attribute wie „oben“, „links“, „unten“ und „rechts“ sind im statischen Zustand ungültig. Um diese Attribute zu verwenden, muss die Position auf einen der anderen drei Werte festgelegt werden.

Relativ: Relative Positionierung. Das Element passt sich an die Position an, an der es sich bei der statischen Positionierung befand, und wird ihm weiterhin zugewiesen. Die Elemente auf beiden Seiten werden nicht näher an das Element herangeführt, um diesen Platz zu füllen. Sie werden sich aber auch nicht von der neuen Position des Elements entfernen. Absolut: Absolute Positionierung. Das Element wird relativ zum enthaltenden Element positioniert. Wenn es beispielsweise in einem anderen absolut positionierten Element verschachtelt ist, wird es relativ zu diesem Element positioniert. Behoben: Feste Positionierung. Das Element wird auf eine feste Position im Browser gesetzt und scrollt nicht mit anderen Elementen. Im übertragenen Sinne ändert sich die Position des festen Elements auf dem Bildschirm nicht, wenn die Bildlaufleiste nach oben oder unten gezogen wird. Es ist zu beachten, dass IE6 dieses Attribut nicht unterstützt. Hinweis: Wenn die Elemente absolut zentriert sind, kommt es bei unterschiedlichen Auflösungen zu Abweichungen. In diesem Fall können wir dies mit einer Methode wie der folgenden beheben: