自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

z-index的特点

作者:灰牛站长•发布时间:2021-07-12 11:29:57•浏览

思路:

  • ➥z-index的结构/定位元素默认的z-index
  • ➥z-index单位
  • ➥能不能用子元素和父元素比较
  • ➥父元素没有z-index,能不能通过子元素控制他们的层级=>改变层级,父元素z-index

z-index属性的特点

  1. 默认是书写顺序在后的定位元素覆盖在顺序前的定位元素
  2. 可以使用z-index属性修改定位元素的层级关系
  3. 所有定位元素的z-index默认值都是一样的
  4. z-index值是数字没有单位,支持负数
  5. 一般都是同级元素进行层级的比较

当参照物是相对定位或绝对定位的时候,父级元素之间没有z-index值,子级元素的z-index 值会出来做比较

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
z-index的特点
1.都有定位元素的标签 在后面的标签的z-index要比在前面的z-index的值要大
z.z-index没有单位 支持负值
3.z- index一般都是同级元素的比较 子元素和父元素去比较z-index并不遵
循我们说的规律:值越大越在上(我们一般不会拿子元素去跟他的父元素去比较
z-index的大小)
4.z-index属性不能继
*/
.red{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
z-index: -1;
}
.blue{
width: 400px;
height: 400px;
background-color: blue;
position: absolute;
z-index: 9;
}
.wrap{
width: 500px;
height: 500px;
background-color: #ccc;
position: relative;
z-index: 99;
}

.parent1{
position:absolute;
width: 200px;
height: 200px;
background-color: #A52A2A
}
.parent2{
position:absolute;
width: 300px;
height: 400px;
background-color: #FF00FF
}
.son1,.son2{
position: relative;
}
.son1{
z-index: 9;
}
.son2{
z-index: 10;
}
</style>
</head>
<body>
<!-- <div class="red"></div>
<div class="blue"></div> -->
<div class="wrap">
<div class="blue"></div>
<div class="red"></div>
</div>

<div class="parent2">
<div class="son2"></div>
</div>
<div class="parent1">
<div class="son1"></div>
</div>
</body>
</html>

z-index的特点效果图

相关文章

  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之绝对定位

    定位之绝对定位

    定位元素元素层级元素定位滚动条 绝对定位- position: absolute;特点 脱离文档流 可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直...
    2021-07-12 11.07.13
  • clear的值和特点及伪元素before和after的使用

    clear的值和特点及伪元素before和after的使用

    clear:both的特点 元素需是块级元素 元素不能带有浮动属性 元素必须放在最后一个浮动元素的后面 用户是看不到这个元素的 clearfix清浮动方法的属性 浮动元...
    2021-07-12 11.07.45

手机端