html设置z index.html,CSS中z-index属性的使用方法和示例介绍

怎么使用CSS z-index属性？下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

z-index属性介绍只有设置了定位我们才会使用到该z-index属性，如：固定定位、相对定位、绝对定位。

定位元素默认的z-index属性值是0。

如果2个定位的元素都没有设置z-index属性，后者会覆盖到前者。

如果2个定位的元素都设置了z-index属性，并且数值一样大还是后者会覆盖到前者。

z-index属性的属性值大的就会覆盖小，就是设置元素的层级。

z-index属性实践用实践证明这句话，如果2个定位的元素都没有设置z-index属性，后者会覆盖到前者。

代码块

z-index属性

div{

width: 200px;

height: 200px;

}

.div1{

background-color: red;

position: relative;

top: 50px;

left: 50px;

}

.div2{

background-color: slateblue;

position: relative;

left: 100px;

}

结果图：

用实践来证明这句话，如果2个定位的元素都设置了z-index属性，并且数值一样大还是后者会覆盖到前者。

代码块

z-index属性

div{

width: 200px;

height: 200px;

}

.div1{

background-color: red;

position: relative;

top: 50px;

left: 50px;

z-index: 2;

}

.div2{

background-color: slateblue;

position: relative;

left: 100px;

z-index: 2;

}

结果图：

用实践来证明这句话，z-index属性的属性值大的就会覆盖小，就是设置元素的层级。

代码块

z-index属性

div{

width: 200px;

height: 200px;

}

.div1{

background-color: red;

position: relative;

top: 50px;

left: 50px;

z-index: 3;

}

.div2{

background-color: slateblue;

position: relative;

left: 100px;

z-index: 2;

}

结果图：

更多web前端开发知识，请查阅 HTML中文网！！

html设置z index.html,CSS中z-index属性的使用方法和示例介绍相关推荐

css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17 来源:亿速云阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
在html中如何设置图片轮显,css中怎么让图片轮播？
css中让图片轮播的方法:将多个大小相同的图片横排放在一个图片中,然后在图片容器外加一个展示容器,并为图片容器添加自定义动画,在动画不同阶段设置递增的偏移值即可实现图片轮播. css让图片轮播实现思想 ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...

html设置z index.html,CSS中z-index属性的使用方法和示例介绍

html设置z index.html,CSS中z-index属性的使用方法和示例介绍相关推荐

最新文章

热门文章