css如何让两个div重叠-创新互联-成都快上网建站

css如何让两个div重叠-创新互联

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

专注于为中小企业提供成都做网站、网站设计、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业杭锦后免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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重叠-创新互联
分享URL:http://kswjz.com/article/shpgs.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流