Heim > Artikel > Web-Frontend > Was sind die Positionsattribute?
Was sind die Positionsattribute?
- coldplay.xixiOriginal
- 2021-03-01 17:05:1224654Durchsuche
Die Positionsattribute sind: 1. relative, die verwendet wird, um relativ positionierte Elemente zu generieren und sie relativ zu ihrer normalen Position zu positionieren. 2. Absolut, wird zum Generieren absolut positionierter Elemente verwendet, die im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert sind. 3. Fest, wird zum Generieren fest positionierter Elemente verwendet, die relativ zum Browserfenster positioniert sind. 4. static, der Standardwert, es wird keine Positionierung durchgeführt und das Element wird im normalen Fluss angezeigt. 5. Sticky, wird für die Sticky-Positionierung verwendet, die auf der Position der Schriftrolle des Benutzers basiert.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer. Diese Methode ist für alle Computermarken geeignet.
Positionsattribute sind:
1. Position: relativ; relative Positionierung
generiert ein relativ positioniertes Element und positioniert es relativ zu seiner normalen Position. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.
1> Hat keinen Einfluss auf die Eigenschaften des Elements selbst (ob Blockelemente oder Inline-Elemente ihre ursprünglichen Eigenschaften behalten)
2> Verursacht nicht, dass das Element aus dem Dokumentfluss entweicht (die ursprüngliche Position des Elements bleibt bestehen). bleibt erhalten, auch wenn die Position geändert wird, wird sie nicht belegt.
3> Ohne Positionierungsoffset hat es keine Auswirkung auf das Element (Offset relativ zur ursprünglichen Position)
4> Der Z-Index-Stil kann verwendet werden, um die hierarchische Beziehung eines positionierten Elements zu ändern. Dadurch ändert sich die Abdeckungsbeziehung der Elemente. Je größer der Wert, desto höher kann er nur für Elemente sein, deren Positionsattribut Der Wert ist relativ, absolut oder fest. (Beide sind positionierte Elemente, und letzteres überschreibt die vorherige Positionierung.)
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
2 Position: absolut; absolute Positionierung
relativ zum ersten übergeordneten Element positioniert werden, mit Ausnahme der statischen Positionierung. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.
1> Machen Sie das Element vollständig aus dem Dokumentfluss (belegen Sie keinen Platz mehr im Dokumentfluss)
2> Stellen Sie sicher, dass das Inline-Element Breite und Höhe unterstützt, wenn Sie die Breite und Höhe festlegen (Ändern Sie die Eigenschaften des Inline-Elements).
3> Wenn die Breite des Blockelements nicht festgelegt ist, wird die Breite durch den Inhalt gestreckt (Änderung der Eigenschaften des Blockelements)
4> Versatz relativ zum zuletzt positionierten übergeordneten Element (sofern sein übergeordnetes Element
5> Die relative Positionierung wird im Allgemeinen in Verbindung mit der absoluten Positionierung verwendet (stellen Sie das übergeordnete Element auf relative Positionierung ein, sodass es relativ zum übergeordneten Element versetzt ist). )
6> Aktualisieren Sie die Ebene (wie bei der relativen Positionierung)
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
3. Position: fest; feste Positionierung
fest positionierte Elemente und positioniert sie relativ zum Browserfenster. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
4. Position: statisch: Standardwert
Standardlayout. Das Element erscheint im normalen Fluss (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen).
5. Position: Sticky-Sticky-Positionierung
Sticky-Positionierung, die auf der Position der Schriftrolle des Benutzers basiert.
Es verhält sich wie position:relative; und wenn die Seite über den Zielbereich hinaus scrollt, verhält es sich wie position:fixed; und es wird an der Zielposition fixiert. Hinweis: Internet Explorer, Edge 15 und frühere IE-Versionen unterstützen keine Sticky-Positionierung. Safari erfordert das Präfix -webkit-. Verwandte Tutorial-Empfehlungen:Das obige ist der detaillierte Inhalt vonWas sind die Positionsattribute?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!