189 8069 5689

css如何让两个div重叠

这篇文章给大家分享的是有关css如何让两个div重叠的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

连江ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

css让两个div重叠的方法：首先利用【position:absolute】属性对div设置绝对定位；然后利用z-index属性来确定哪个div在上层。z-index属性用于指定一个元素的堆叠顺序。

重要属性介绍：

position 属性规定元素的定位类型。

属性值：

  • absolute    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • relative    生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

属性值：

  • auto    默认。堆叠顺序与父元素相等。

  • number    设置元素的堆叠顺序。

  • inherit    规定应该从父元素继承 z-index 属性的值。

代码实现：

html代码：

css代码：

#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;
}

感谢各位的阅读！关于css如何让两个div重叠就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！


本文名称：css如何让两个div重叠
文章出自：http://jkwzsj.com/article/pjcecs.html

其他资讯