Einige wichtige Punkte bei der Verwendung der Positionspositionierungseigenschaft von CSS

1.position:static

Das statische Attribut ist der Standardwert der Position. Das heißt, wenn für ein Element kein Positionsattribut festgelegt ist , sein Standardwert ist Der Wert 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. Zum Beispiel 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 zur Position positioniert, die die Position definiert Das Attribut wird um 100 Pixel nach unten verschoben. Die Definition des relativen Attributwerts ist ein solcher Positionierungsmodus.

4.position:fixed
Feste Positionierung wird nicht oft verwendet, eignet sich aber sehr gut für die teilweise Produktion fester Muster, wie zum Beispiel des oberen Menüs. 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 eine Kombination aus beiden, um ein zweispaltiges Layout zu implementieren.

#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:both Clear floats

Manchmal wird die Positionierung reduziert, das heißt, das untergeordnete Element befindet sich im übergeordneten Element, aber die Größe des übergeordneten Elements folgt nicht Die Größe des untergeordneten Elements wird „erweitert“, was zum Kollapseffekt des übergeordneten Elements führt. Dieser Fehler tritt auf, weil das untergeordnete Element das Float-Attribut festlegt, wodurch das übergeordnete Element kollabiert. Um diesen Fehler zu beheben, benötigen Sie um das übergeordnete Element auf das übergeordnete Element zu setzen. Der Beispielcode lautet wie folgt:

Weitere relevante Artikel zur Verwendung von CSS-Positionierungsattribute, bitte beachten Sie die chinesische PHP-Website

#p-1a 
{     
             float:left;     
             width:190px;     
 }     
            #p-1b
 {     
             float:left;     
             width:190px;     
 }     
            #p-1c
 {     
             clear:both;     
 }