在css中 z-index 的用法

心已赠人 2022-08-06 00:26 184阅读 0赞

>   
> 
> 
> 终于彻底明白 position及z-index的用法
> 
> static : 　无特殊定位，对象遵循HTML定位规则
> 
> absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
> 
> relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置,
> 
>  
> 
> z-index：其实从字面上已经可以解释；z是从x、y以后的第三个轴，从网页上表现就是除了上下左右外的前后。
> 
> 规定这个属性，首先要求Div必须是浮动的，z值越大，Div越靠前；数值可以不连续。
> 
>  
> 
> 例如
> 
> <div style="z-index:1000;background:red;color:white;width:200px;height:200px;">图层1</div>
> 
> <div style="z-index:100;background:yellow;color:blue;width:200px;height:200px;position:absolute;left:70px;top:120px;">图层2</div>
> 
> <div style="z-index:10;background:green;color:white;width:200px;height:200px;position:relative; left:30px;top:-150px;">图层3</div>
> 
>  [![CSS <wbr>z-index的用法][CSS_wbr_z-index]][CSS_wbr_z-index_CSS_wbr_z-index]
> 
>  
> 
> 理论上图层1的z-index值设最大，应该排在最上面，由于它没有设浮动，遵循HTML定位规则
> 
> 为什么图层3的top设负值呢？因为position:relative不能层叠，它应该是在图层1的下方，如果要它上去一点。只能设负值。而图层2设position:absolute浮动效果，它可以任意摆放，不受其它div影响，完全根据html页面定位

[CSS_wbr_z-index]: http://s11.sinaimg.cn/bmiddle/59f63defg58e0b7b557ca
[CSS_wbr_z-index_CSS_wbr_z-index]: /images/20220806/37e50fba2d7f4c779c3a9201694d5b60.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中position属性的用法

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right

阳光穿透心脏的1/2处/ 2023年06月24日 08:08/ 0 赞/ 40 阅读

相关 css中 base 标签用法

base标签作用就是管理页面中所有a标签的跳转功能属性 <base href="http:www.baidu.com" taget="_blank"> 如果这样设置

布满荆棘的人生/ 2022年12月17日 03:25/ 0 赞/ 198 阅读

相关在css中 z-index 的用法

> > > > 终于彻底明白 position及z-index的用法 > > static : 　无特殊定位，对象遵循HTML定位规则 > > absolute

心已赠人/ 2022年08月06日 00:26/ 0 赞/ 185 阅读

相关 css3中的border-image用法

[css3\_快速弄明白border-image][css3_border-image] [鑫空间链接—][Link 1] [ CSS3 bord

水深无声/ 2022年07月16日 13:08/ 0 赞/ 241 阅读

相关 css3中的skew的用法

skew(xdeg,ydeg);用于斜拉变换。当只有一个参数时，第二个参数为0. [链接][Link 1] [Link 1]: http://zyxn.bl

以你之姓@/ 2022年06月18日 00:51/ 0 赞/ 246 阅读

相关 css3中transform-style的用法

设置内嵌的元素在 3D 空间如何呈现。 transform-style:flat(默认)|perserve-3d [链接1][1] [例子1][1 1]

深藏阁楼爱情的钟/ 2022年06月18日 00:45/ 0 赞/ 229 阅读

相关详解CSS中:nth-child的用法

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解

我不是女神ヾ/ 2022年06月13日 08:56/ 0 赞/ 258 阅读

相关 css中的vertical-align用法

vertical-align分类： 1.线类：baseline top middle bottom 2.文本类: text-top text-bottom 3.上

向右看齐/ 2022年06月09日 04:26/ 0 赞/ 222 阅读

相关 css3 中的calc用法

定义与用法 calc() 函数用于动态计算长度值。 1.需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2.

柔光的暖阳◎/ 2022年05月21日 04:23/ 0 赞/ 291 阅读

相关 Css中路径data用法

`Data URI scheme`是在`RFC2397`中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。 data:,文本数据 d

清疚/ 2021年07月04日 13:41/ 0 赞/ 480 阅读