Wie man zwei Divs mit CSS überlappen lässt

So überlappen Sie zwei Divs in CSS: Verwenden Sie zuerst das Attribut [position:absolute], um die absolute Positionierung für das Div festzulegen. Verwenden Sie dann das Z-Index-Attribut, um zu bestimmen, welches Div sich auf der oberen Ebene befindet. Das Z-Index-Attribut wird verwendet, um die Stapelreihenfolge eines Elements anzugeben.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS2-Version. Diese Methode ist für alle Computermarken geeignet.

Einführung in wichtige Attribute:

Das Positionsattribut gibt den Positionierungstyp des Elements an.

(Teilen von Lernvideos: css-Video-Tutorial)

Attributwert:

• absolute Erzeugen Sie ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, mit Ausnahme der statischen Positionierung. Die Position des Elements wird über die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

• relative Erzeugt relativ positionierte Elemente, die relativ zu ihrer normalen Position positioniert sind. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu. Das

z-index-Attribut gibt die Stapelreihenfolge eines Elements an. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge.

Attributwert:

• auto Standard. Die Stapelreihenfolge entspricht der des übergeordneten Elements.

• Nummer Legt die Stapelreihenfolge der Elemente fest.

• inherit gibt an, dass der Wert des Z-Index-Attributs vom übergeordneten Element geerbt werden soll.​

Code-Implementierung:

HTML-Code:

<div id="img_head" >
<img src="img/首页logo.png" class="head">
</div>
<div id="img_head_back">
<img src="img/背景.png" class="back" >
</div>

CSS-Code:

#img_head{
border: 1px solid #FF0000; 
position:absolute;
width:210px;
height: 210px;
z-index: 20;
left:600px;
top:170px;
text-align: center;
}
#img_head_back{
border: 0px solid #FF0000;
position:absolute;
width: 210px;
height: 210px;
left:600px;
top:170px;
z-index:10;
}

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWie man zwei Divs mit CSS überlappen lässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!