Was bedeutet CSS-Positionierungslayout?

Positionierungslayout in CSS bezieht sich auf die Art und Weise, wie Elemente von ihren ursprünglichen Positionen getrennt und an einer beliebigen Stelle auf der Seite positioniert werden können. Das Positionierungslayout kann in statische Positionierung (statisch), absolute Positionierung (absolut), relative Positionierung (relativ) unterteilt werden. und feste Positionierung Es gibt fünf Positionierungsmethoden: (fest) und klebrige Positionierung (klebrig).

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was bedeutet CSS-Positionierungslayout?

CSS-Layout-Positionierungslayout Positionierungslayout (Position) bedeutet, dass das Element von seiner ursprünglichen Position getrennt und an einer beliebigen Position auf der Seite positioniert werden kann.

Mit Position, links, rechts, oben, unten können Sie die bestehende Position des Elements ändern, das Element beispielsweise aus dem normalen Layoutfluss herausspringen lassen und an einer bestimmten Position auf der Seite fixieren.

Das Positionierungslayout in CSS ist in statisches, relatives, absolutes, festes und Sticky-Layout unterteilt.

1. Die Standardpositionierung von HTML-Elementen ist statisch Standardmäßig wird die Position festgelegt: statisch; Stilelemente werden von links, rechts, unten und oben nicht beeinflusst. Es wird seine Position im normalen Fluss aufgrund einer speziellen Positionierungsmethode nicht ändern. Das Beispiel lautet wie folgt:

      
  
position: static;
 
使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:
 
 该元素使用了 position: static; 
  

Hinweis:

Elemente mit relativer Positionierung werden nicht davon gelöst der Dokumentenfluss, d. h. Es wird gesagt, dass er zwischen Inline-Elementen/Elementen auf Blockebene/Inline-Blockelementen unterscheidet
Nur ein Attribut kann in die gleiche Richtung eingestellt werden, nämlich links, rechts wählt eine Attributeinstellung aus. Wenn oben festgelegt ist, kann unten nicht festgelegt werden. Verwendungsszenario:

zur Feinabstimmung des Elements

      
  
这是位于正常位置的标题
 
这个标题相对于其正常位置向左移动
 
这个标题相对于其正常位置向右移动
 
相对定位会按照元素的原始位置对该元素进行移动。
 
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
 
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。
  

Ausgabeergebnis:

• 3. Position: absolut; (absolute Positionierung)

• Der Referenzpunkt des Absoluten Positionierung

Standardmäßig wird unabhängig vom Vorgängerelement der Körper als Referenzpunkt verwendet.

• Wenn es jedoch ein Positionierungsflusselement im Vorgängerelement gibt (absolute/relative/feste Positionierung wird verwendet), dann ist das Element der Referenzpunkt

• Wenn sein Vorgängerelement mehrere Positionierungsflusselemente enthält, wird das Das am nächsten gelegene Element wird ausgewählt. Das Positionierungsflusselement wird als Referenzpunkt verwendet nicht zwischen Inline-Elementen/Block-Level-Elementen/Inline-Elementen Blockelementen unterscheiden

Absolut positionierte Elemente ignorieren die Auffüllung ihrer Vorgängerelemente

Beispiele sind wie folgt:

      
  
这是一个绝对定位了的标题
 
用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.
  

Ausgabeergebnisse:

Das Element mit fester Positionierung wird relativ zum Ansichtsfenster positioniert, was bedeutet, dass es beim Scrollen der Bildlaufleiste nicht verschoben wird eines Ansichtsfensters. Passen Sie seine Position über die Attribute „Links“, „Rechts“, „Unten“ und „Oben“ an. Zu beachtende Punkte erstellt zwischen Inline-Elementen/Block-Level-Elementen/Inline-Block-Elementen
Beispiele sind wie folgt:

•       
    
  Some more text
   
  注意: IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.
   
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
  Some text
    

  Nach dem Login kopieren
  Ausgabeergebnis:

Diese Positionierung Kombiniert relative Positionierung und feste Positionierung. Wenn das Ansichtsfenster diese Position erreicht, wird es fixiert, zum Beispiel: set top:50px, dann wird das Sticky-Element fixiert, wenn es eine Position von 50px erreicht die Oberseite des relativ positionierten Elements und bewegt sich nicht mehr nach oben (dies entspricht einer festen Positionierung).

• Zu beachtende Punkte

• Klebrig positionierte Elemente brechen nicht aus dem Dokumentenfluss ab Nutzungsbedingungen

• Übergeordnete Elemente dürfen keine overflow:hidden- oder overflow:auto-Attribute haben.

Muss einen der vier Werte oben, unten, links, rechts angeben, andernfalls erfolgt die relative Positionierung

Die Höhe des übergeordneten Elements darf nicht niedriger sein als die Höhe des Sticky-Elements

Das Sticky-Element ist nur in seinem übergeordneten Element wirksam innerhalb von

      
  
尝试滚动页面。
 
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。
 
我是粘性定位!
 
 
滚动我
 
来回滚动我
 
滚动我
 
来回滚动我
 
滚动我
 
来回滚动我
 
  

输出结果：

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonWas bedeutet CSS-Positionierungslayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!