Heim > Artikel > Web-Frontend > Was sind die Werte des Positionsattributs in CSS?
Was sind die Werte des Positionsattributs in CSS?
- 下次还敢Original
- 2024-04-26 11:39:141009Durchsuche
Das Positionsattribut gibt die Positionierungsmethode des Elements an, einschließlich der folgenden Werte: statisch: die normale Position des Elements im Dokumentfluss relativ: relativ zur ursprünglichen Position verschoben, ohne Auswirkungen auf andere Elemente absolut: aus dem Dokumentfluss entfernt , entsprechend dem übergeordneten Element oder Körper positioniert fixiert : Im Ansichtsfenster behoben, Position beim Scrollen beibehalten klebrig: Im Ansichtsfenster oder Container nach Erreichen des Schwellenwerts behoben
Der Positionsattributwert in CSS
Die Position Das Attribut wird verwendet, um das Element im übergeordneten Element oder in der Seitenpositionierungsmethode anzugeben. Es hat die folgenden möglichen Werte:
1. statisch (Standard)
- Das Element wird an seiner normalen Position im Dokumentenfluss positioniert.
2. relativ
- Das Element bewegt sich relativ zu seiner ursprünglichen Position, ohne die Position anderer Elemente zu beeinflussen.
3. Das absolute
- -Element wird aus dem Dokumentfluss entfernt und basierend auf seinem übergeordneten Element oder dem
<body>-Element positioniert (falls kein übergeordnetes Element angegeben ist).<body>元素（如果未指定父元素）定位。
4. fixed
- 元素与视口固定，滚动页面时保持在同一位置。
5. sticky
- 元素在达到指定阈值后固定在视口或容器中。
使用示例：
<code class="css">/* 将元素向右移动 50px */
.element {
position: relative;
left: 50px;
}
/* 将元素从页面顶部 100px 处开始定位 */
.element {
position: absolute;
top: 100px;
}
/* 将元素固定在视口右侧 */
.element {
position: fixed;
right: 0;
}</code>
选择合适的 position 值的指南：
- 如果元素需要位于文档流的正常位置，请使用
static。 - 如果需要相对其原始位置移动元素，请使用
relative。 - 如果需要从文档流中移除元素，请使用
absolute或fixed。 - 如果需要在滚动时将元素固定在视口中，请使用
sticky
static, wenn das Element an einer normalen Position im Dokumentenfluss sein muss. 🎜🎜Wenn Sie ein Element relativ zu seiner ursprünglichen Position verschieben müssen, verwenden Sie relative. 🎜🎜Wenn Sie Elemente aus dem Dokumentenfluss entfernen müssen, verwenden Sie absolute oder fixed. 🎜🎜Wenn Sie beim Scrollen ein Element im Ansichtsfenster behalten müssen, verwenden Sie sticky. 🎜🎜Das obige ist der detaillierte Inhalt vonWas sind die Werte des Positionsattributs in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!