Was sind die Werte des Positionsattributs in CSS?-CSS-Tutorial-php.cn

Was sind die Werte des Positionsattributs in CSS?

下次还敢

Freigeben： 2024-04-26 11:39:14

Original

1047 Leute haben es durchsucht

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

Was sind die Werte des Positionsattributs in CSS?

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>

Nach dem Login kopieren

选择合适的 position 值的指南：

如果元素需要位于文档流的正常位置，请使用 static。
如果需要相对其原始位置移动元素，请使用 relative。
如果需要从文档流中移除元素，请使用 absolute 或 fixed。
如果需要在滚动时将元素固定在视口中，请使用 sticky

🎜4. behoben🎜🎜🎜🎜Das Element ist im Ansichtsfenster fixiert und bleibt beim Scrollen der Seite an derselben Position. 🎜🎜🎜🎜5. klebrig🎜🎜🎜🎜Das Element wird nach Erreichen des angegebenen Schwellenwerts im Ansichtsfenster oder Container fixiert. 🎜🎜🎜🎜Anwendungsbeispiel: 🎜🎜rrreee🎜🎜Richtlinien zur Auswahl geeigneter Positionswerte: 🎜🎜🎜🎜Verwenden Sie 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!