个人博客 > 学无止境 > WEB前端 > 琅枫教你z-index在css中如何使用

琅枫教你z-index在css中如何使用

当你定义的CSS中用了定位属性也就是(position)时,那么就需要用到z-index属性了,

用法如下:

.div1{ position:absolute; z-index:5; width:100px; height:50px; background:#666;}
.div2{ position:absolute; z-index:10;width:100px; height:50px; background:red; left:50px;}

这样div2就会在div1的上面。

演示如下:

div1
div2

也可以这么理解:

z-index就是网页的z轴,用css定位把两个层重叠在一起,z-index的值越大,就越靠上,但z-index没有单位,这点需要注意下。

完整的代码如下

<html>
<head>
<style>
div{position:absolute;width:100px;height:50px;}
.div1{z-index:1;background:#000;}
.div2{z-index:2;top:30px;left:30px;background:#666;}
</style>
</head>
<body>
<div class="div1">z-index:1</div>
<div class="div2">z-index:2</div>
</body>
</html>

本文出自:琅枫个人博客。如需转载请注明出处!

本文出处:"https://www.phpfeng.cn/learn/web/126.html"

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对琅枫博客的支持! ~(@^_^@)~

微信打赏

琅枫博客微信号

支付宝打赏

琅枫博客个人支付宝
本文关键词: 琅枫教你z-index在css中如何使用



你想在庞大的互联网上留下一丝足迹?

我不想成为一个庸俗的人。十年百年后,当我们死去,质疑我们的人同样死去,后人看到的是裹足不前、原地打转的你,还是一直奔跑、走到远方的我?

点我了解如何搭建个人博客?