CSS-Positionierungstechniken

In diesem Artikel werden 6 häufig verwendete Eigenschaften von CSS untersucht. Jeder wird mit diesem Artikel zufrieden sein.

1.position:static

Das statische Attribut ist der Standardwert der Position, d. h. wenn für ein Element kein Positionsattribut festgelegt ist it, Sein Standardwert ist statisch.

2.position:absolute

Dies ist ein häufig verwendeter Positionsattributwert. Wenn für ein Element „absolut“ festgelegt ist, wird das Element vom ursprünglichen Dokumentfluss getrennt. Um es anschaulicher auszudrücken: Wenn beispielsweise ein Element mit position:absolute definiert ist, hat dieses Element keine Positionsbeziehung zu anderen Elementen auf der Seite, sondern schwebt über der gesamten Seite. Änderungen an Position, Größe usw. anderer Elemente auf der Seite haben keinen Einfluss auf die Position eines Elements, das einem Außenstehenden entspricht.

3.position:relative

relativ ist die nützlichste Definitionsmethode. Das Setzen des relativen Attributs zeigt die Änderung des Elements relativ zu seiner ursprünglichen Position an. Beispielsweise definieren wir ein B-Element und legen den folgenden CSS-Stil fest:

#b{     
    position: relative;     
    width:100px;     
    height:100px;     
    top:100px;     
}

Das durch diesen Code definierte B-Element wird relativ zum Positionsattribut positioniert, das nicht definiert ist Position verschiebt sich um 100 Pixel nach unten. Die Definition des relativen Attributwerts ist ein solcher Positionierungsmodus.

4.position:fixed

Feste Positionierung wird nicht oft verwendet, eignet sich jedoch sehr gut für die Produktion von Teilen mit festem Modus, wie z. B. dem oberen Menü. Nach der Definition des festen Attributs ändert sich die Position des Elements bei keinem Verhalten.

5. Relative+Position

Die gleichzeitige Verwendung dieser beiden Positionen ist eine sehr verbreitete Technik, und auch Anfänger können hier auf große Probleme stoßen. Wenn ein Element absolut positioniert ist, basiert seine Referenz im Allgemeinen darauf, ob das Element, das sich selbst am nächsten liegt, auf relative Positionierung eingestellt ist. Wenn nicht, wird es als das Element positioniert, das sich selbst am nächsten liegt zu seinen Vorgängerelementen für relativ positionierte Elemente, bis HTML gefunden wird. Der folgende Code verwendet beispielsweise die Kombination der beiden, um ein zweispaltiges Layout zu implementieren.

<span style="white-space:pre">    </span>#p-1 {     
             position:relative;     
            }     
            #p-1a {     
             position:absolute;     
             top:0;     
             rightright:0;     
             width:200px;     
            }     
            #p-1b {     
             position:absolute;     
             top:0;     
             left:0;     
             width:200px;     
            }

6.clear:beide löschen Floats

Manchmal wird die Positionierung reduziert, das heißt, das untergeordnete Element befindet sich im übergeordneten Element, hat jedoch die Größe des übergeordneten Elements ändert sich nicht. Das untergeordnete Element wird entsprechend der Größe des untergeordneten Elements „erweitert“, was zum Kollapseffekt des übergeordneten Elements führt. Dieser Fehler tritt auf, weil das untergeordnete Element das Float-Attribut festlegt, was dazu führt, dass das übergeordnete Element reduziert wird. Um diesen Fehler zu beheben, müssen Sie „clear float“ für das übergeordnete Element festlegen. Der Beispielcode lautet wie folgt:

Im Folgenden geht es darum, mehr über die sechs Eigenschaften zu erfahren, die häufig in verwendet werden CSS-Positionierung. Ich hoffe, es wird für alle hilfreich sein. Weitere Artikel zu CSS-Positionierungstechniken finden Sie auf der chinesischen PHP-Website