How to make two divs overlap with css

Css method to make two divs overlap: first use the [position:absolute] attribute to set absolute positioning for the div; then use the z-index attribute to determine which div is on the upper layer. The z-index attribute is used to specify the stacking order of an element.

The operating environment of this tutorial: Windows 10 system, CSS2 version, this method is suitable for all brands of computers.

Introduction to important attributes:

The position attribute specifies the positioning type of the element.

(Learning video sharing: css video tutorial)

Attribute value:

• absolute Generate absolutely positioned elements, relative Positioned on the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

• relative Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

The z-index attribute specifies the stacking order of an element. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

Attribute value:

• auto Default. The stacking order is equal to the parent element.

• #number Set the stacking order of elements.

• #inherit Specifies that the value of the z-index attribute should be inherited from the parent element.

Code implementation:

html code:

<div id="img_head" >
<img  class="head lazy"  src="/static/imghwm/default1.png"  data-src="img/首页logo.png"    alt="How to make two divs overlap with css" >
</div>
<div id="img_head_back">
<img  class="back lazy"  src="/static/imghwm/default1.png"  data-src="img/背景.png"     alt="How to make two divs overlap with css" >
</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;
}

Related recommendations: CSS tutorial

The above is the detailed content of How to make two divs overlap with css. For more information, please follow other related articles on the PHP Chinese website!