CSS入门11-定位与覆盖

作者: love丁酥酥 | 来源:发表于2018-01-20 17:10 被阅读138次

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

1. 简介

我们提到过css的定位机制。正常不作处理的html元素遵循普通文档流，但是有些定位方式会让这些元素脱离文档流。那么这些脱离的文档流如果与其他元素形成重叠，谁能够占据优势呢？

2. 普通文档流与脱离普通文档流

可以分为三类：

元素若不指定，使用默认定位static，属于普通文档流。
指定使用realtive定位，可以相对在普通文档流中的位置进行偏移，但仍然属于普通文档流。
指定使用absolute， fixed定位或者float浮动，会使元素脱离普通文档流。

3. 定位之间的覆盖

3.1 相同定位之间的覆盖

3.1.1 static与static

这种情况，在普通文档流中，无覆盖。

3.1.2 relative与relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.1.2</title>
    <style>
        .relative1 {
            background-color: blue;
            position: relative;
            top: 15px;
        }
        .relative2 {
             background-color: green;
             position: relative;
             top: 0px;
         }
        .relative3 {
            background-color: red;
            position: relative;
            top: 0px;
        }
        .relative4 {
            background-color: yellow;
            position: relative;
            top: -15px;
        }
    </style>
</head>
<body>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
<div class="relative3">relative3</div>
<div class="relative4">relative4</div>
</body>
</html>

3.1.2

由图看出，relative之间后者覆盖前者

3.1.3 absolute之间（fixed与absolute只是定位的参考对象不一样，但是覆盖的优先级一样，故在此将其合并为一个讨论）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.1.3</title>
    <style>
        .relative {
            position: relative;
        }
        .absolute1 {
            background-color: blue;
            position: absolute;
            top: 20px;
        }
        .absolute2 {
             background-color: green;
             position: absolute;
             top: 20px;
         }
        .absolute3 {
            background-color: red;
            position: absolute;
            top: 40px;
        }
        .absolute4 {
            background-color: yellow;
            position: absolute;
            top: 40px;
        }
        .fixed1 {
            background-color: black;
            position: fixed;
            top: 20px;
        }
        .fixed2 {
            background-color: purple;
            position: fixed;
            top: 20px;
        }
        .fixed3 {
            background-color: black;
            position: fixed;
            top: 50px;
        }
        .fixed4 {
            background-color: purple;
            position: fixed;
            top: 50px;
        }
    </style>
</head>
<body>
<div calss="relative">
    <div class="fixed1">fixed1</div>
    <div class="fixed2">fixed2</div>
    <div class="absolute1">absolute1</div>
    <div class="absolute2">absolute2</div>
</div>
<div class="relative">
    <div class="absolute3">absolute3</div>
    <div class="absolute4">absolute4</div>
    <div class="fixed3">fixed3</div>
    <div class="fixed4">fixed4</div>
</div>
</body>
</html>

3.1.3

从图中可以看出，absolute，fixed同级且后者覆盖前者。

3.1.4 float之间的覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.1.4</title>
    <style>
        .float-l {
            float: left;
        }
        .float-r {
            float: right;
        }
    </style>
</head>
<body>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-l">left</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
<div class="float-r">right</div>
</body>
</html>

3.1.4-1

3.1.4-2

3.1.4-3

可以看出，利用float，元素排满一行以后会自动换行，不会覆盖。

3.2 不同定位之间的覆盖

3.2.1 static与relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.1</title>
    <style>
        .static {
            background-color: blue;
        }
        .relative1 {
             background-color: green;
             position: relative;
             top: -20px;
         }
        .relative2 {
            background-color: green;
            position: relative;
            top: 20px;
        }
    </style>
</head>
<body>
<div class="static">static1</div>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
<div class="static">static2</div>
</body>
</html>

3.2.1

可以看出，relative覆盖static

3.2.2 static与absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.2</title>
    <style>
        .static {
            background-color: blue;
        }
        .absolute1 {
             background-color: green;
             position: absolute;
             top: 20px;
         }
        .absolute2 {
            background-color: red;
            position: absolute;
            top: 40px;
        }
    </style>
</head>
<body>
<div class="static">static1</div>
<div class="absolute1">absolute1</div>
<div class="absolute2">absolute2</div>
<div class="static">static2</div>
</body>
</html>

3.2.2

可以看出，static被absolute覆盖。

3.2.3 static与float

<span class="float-l">left</span>

3.2.3-1

3.2.3-2

由图可以看出，static被float覆盖，但是不会覆盖其内容。

3.2.4 relative与absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.4</title>
    <style>
        .relative1 {
             background-color: green;
             position: relative;
             top: 20px;
         }
        .relative2 {
            background-color: green;
            position: relative;
            top: 20px;
        }
        .absolute1 {
            background-color: blue;
            position: absolute;
            top: 20px;
        }
        .absolute2 {
            background-color: blue;
            position: absolute;
            top: 60px;
        }
    </style>
</head>
<body>
<div class="absolute1">absolute1</div>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
<div class="absolute2">absolute2</div>
</body>
</html>

3.2.4

由图看出，relative与absolute是后来者居上。

3.2.5 relative与float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.5</title>
    <style>
        .relative1 {
             background-color: blue;
             position: relative;
             left: -10px;
         }
        .relative2 {
            background-color: blue;
            position: relative;
            left: 30px;
        }
        .float-l {
            background-color: green;
            float: left;
         }
        .float-r {
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
<span class="relative1">relative11111111111</span>
<span class="float-l">left</span>
<span class="float-r">right</span>
<span class="relative2">relative222222222</span>
</body>
</html>

3.2.5

右图可以看出，relative覆盖float。

3.2.6 absolute与float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3.2.6</title>
    <style>
        .absolute1 {
             background-color: blue;
             position: absolute;
             left: 30px;
         }
        .absolute2 {
            background-color: blue;
            position: absolute;
            left: 200px;
        }
        .float-l {
            background-color: green;
            float: left;
         }
        .float-r {
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
<span class="absolute1">absolute11111111111</span>
<span class="float-l">left</span>
<span class="float-r">right</span>
<span class="absolute2">absolute222222222</span>
</body>
</html>

3.2.6

由图可以看出，absolute覆盖float。

4. z-index

前面我们看到的是先后顺序和定位类型对覆盖的影响，那么有没有一种更灵活的方式来决定元素的覆盖关系呢。答案是有的，就是z-index。但是z-index只对relative，absolute和fixed生效，对static和float无效。

4.1 z-index对定位元素的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4.1</title>
    <style>
        .static1 {
            position: static;
            background-color: pink;
        }
        .relative1 {
            background-color: blue;
            position: relative;
            top: -7px;
        }
        .absolute1 {
            background-color: red;
            position: absolute;
            top: 20px;
        }
        float1 {
            background-color: green;
            float: left;
        }
        .static2 {
            position: static;
            background-color: pink;
            z-index: 999;
        }
        .relative2 {
            background-color: blue;
            position: relative;
            top: -7px;
            z-index: 888;
        }
        .absolute2 {
            background-color: red;
            position: absolute;
            top: 60px;
            z-index: 777;
        }
    </style>
</head>
<body>
<div class="static1">static1</div>
<div class="relative1">relative1</div>
<div class="absolute1">absolute1</div>
<div class="static2">static2</div>
<div class="relative2">relative2</div>
<div class="absolute2">absolute2</div>
</body>
</html>

4.1

可以看到，z-index对定位元素中的static无效，对于其余定为元素，z-index
默认值为0，可以设置为任意整数（注意，设置为小数不会生效），z-index越大，元素层级越高。

4.2 z-index对float的作用

在3.2.6的代码中加入z-index，看一下是否会有作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4.2</title>
    <style>
        .absolute1 {
            background-color: blue;
            position: absolute;
            left: 30px;
            z-index: 666;
         }
        .absolute2 {
            background-color: blue;
            position: absolute;
            left: 200px;
            z-index:666;
        }
        .float-l {
            background-color: green;
            float: left;
            z-index:999;
         }
        .float-r {
            background-color: green;
            float: right;
            z-index:999;
        }
    </style>
</head>
<body>
<span class="absolute1">absolute11111111111</span>
<span class="float-l">left</span>
<span class="float-r">right</span>
<span class="absolute2">absolute222222222</span>
</body>
</html>

4.2

可以对比3.2.6看出z-index对于float无效。

另外，z-index对元素层级的影响是依赖于其祖先元素的，把页面看做一层层的盒子叠加而成的话，如果A盒的z-index比B盒大，那么A盒会在B盒之上，此时即使A盒内的元素a的z-index比B盒内的元素b的z-index小，a也会在b之上。这一点其实很容易理解，因为A盒内即使放在最下面的一张纸其实也是比B盒内最上面的一张纸更高。

5. 总结

相同定位（relative，absolute，fixed）之间按先后顺序后者覆盖前者。
不同定位之间static < float < relative,absolute,fixed
z-index能影响relative，absolute，fixed的层级，越大越靠上，相同时按先后顺序后者覆盖前者。
比较z-index时，兄弟之间直接比较大小，非兄弟比较其祖先元素。

参考

07 CSS-相对定位、绝对定位、固定定位、z-index
CSS相对定位|绝对定位(五)之z-index篇
 深刻解析position属性以及与层（z-index）的关系
 深入理解css中position属性及z-index属性