定位元素的重叠

最新推荐文章于 2022-05-12 10:27:21 发布

Eric_keke

最新推荐文章于 2022-05-12 10:27:21 发布

阅读量539

点赞数

分类专栏： HTML5+CSS 文章标签： html xhtml 层叠 z-index 优先级

本文链接：https://blog.csdn.net/nvliba/article/details/52963911

版权

HTML5+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上篇我已经说了，position的元素都是漂浮起来的，肯定会发生一些重叠的现象，但是到底是谁覆盖了谁，又是谁伤害了谁呢？嘻嘻，当然正常情况下有先来后到之分，不过是后来的覆盖先到的。如果是特殊情况呢，有一个层叠定位属性
z-index : auto | number

这就是定义优先级的。当然数字越大优先级越高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position</title>
<style>
.Demo{
    position:absolute;
    width:200px;
    height:150px;
    border:2px solid #00F;
    background:#0F0;
    z-index:3;
    left:100px;
    top:140px;
}
.Demo2{
    position:absolute;
    width:200px;
    height:150px;
    border:2px solid #F00;
    left:130px;
    top:160px;
    background:#00F;
    z-index:2;
}

.Demo3{
    position:absolute;
    width:200px;
    height:150px;
    border:2px solid #F00;
    background:#FF0;
    left:160px;
    top:180px;
    z-index:1;
}
</style>
</head>

<body>
<div class="Demo"></div>
<div class="Demo2"></div>
<div class="Demo3"></div>
</body>
</html>

从颜色的层叠可以明显看出层叠效果。

对于非定位元素用z-index元素是没什么卵用的
。另外不用z-index的会被放到最底层，没毛病！

补充一点，在含有子元素的定位元素中，子元素不论z-index多低，但是还是会在父元素上面，但是在对于其他元素来说，不管子元素的z-index多高，他的显示还是会受到父元素的制约限制。也许这就是互相伤害吧！

Eric_keke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位元素的重叠

上篇我已经说了，position的元素都是漂浮起来的，肯定会发生一些重叠的现象，但是到底是谁覆盖了谁，又是谁伤害了谁呢？嘻嘻，当然正常情况下有先来后到之分，不过是后来的覆盖先到的。如果是特殊情况呢，有一个层叠定位属性 z-index : auto | number这就是定义优先级的。当然数字越大优先级越高<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
复制链接

扫一扫