深入理解css中position属性及z-index属性

请看出处：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。

　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。

第一部分：position: static

　　static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。

　　如html代码如下：

1
2
3
<div class="wrap">
    <div class="content"></div>
</div>

　　css代码如下：

1
2
.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}

　　效果图如下：

我们发现，虽然设置了static以及top，但是元素仍然出现在正常的流中。

　　

第二部分：fixed定位

　　fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。

　　html代码如下：

1
<div class="content">我是使用fix来定位的！！！所以我相对于浏览器窗口，一直不动。</div>

　　css代码如下：

1
2
body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}

　　效果图如下：

即右下角的div永远不会动，就像经常弹出来的广告！！！

值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。

第三部分：relative定位

　　相对定位元素的定位是相对它自己的正常位置的定位。

　　关键：如何理解其自身的坐标呢？

　　让我们看这样一个例子，hmtl如下：

1
2
3
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_bottom">这个标题相对于其正常位置向下移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

　　css代码如下：

1
2
.pos_bottom{position:relative; bottom:-20px;}
.pos_right{position:relative;left:50px;}

　　效果图如下：

即bottom:-20px;；向下移动。  left:50px;向右移动。

即可以理解为：移动后是移动前的负的位置。

比如上例中，移动后是移动前负的bottom:-20px;即移动后是移动前bottom:20px;也就是说，移动后是移动前的向下20px；

又如：left:50px;移动后是移动前左边的-50px;那么也就是说移动后是移动前的右边的50px。

即：移动后对于移动前：如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。

　　弄清楚了relative是如何移动的，下面我们看一看移动之后是否会产生其他的影响。

html代码如下：

1
2
3
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

　　css代码如下：

1
h2.pos_top{position:relative;top:-35px;}

　　效果图如下：

根据之前的说法，top:-35px；值是负数，则直接换成正数，即移动后相对与移动前向上偏移了35px；我们发现于上，移动后和上面的元素发生了重叠；于下，即使相对元素的内容移动了，但是预留空间的元素仍然保存在正常流动，也就是说相对移动之后，不会对下面的其他元素造成影响。

　　

注意：top：20px；是指子元素的margin外侧和包裹元素的border内侧之间的距离是20px。

　第四部分：absolute定位

　　绝对定位元素相对于最近的已定位父元素（float:left/right的定位也管用），如果元素没有已定位的父元素，那么它的位置相对于<html>。

     下面举几个例子：

　　例子1：

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>                body{background:green;}
        .parent{ width: 500px;height: 500px;background: #ccc;}
        .son{ width: 300px;height: 300px;background: #aaa;}
        span{position: absolute; right: 30px; background: #888;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">
            <span>什么？</span>
        </div>
    </div>
</body>
</html>

　效果如下：

即我只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。

例2:

1
.son{position: relative; width: 100px;height: 100px;background: #aaa; }

　相较于上一个例子，我只修改了class为son的元素的css，设置为position：relative；效果图如下：

于是，我们发现现在span的位置是相对于设有position属性的class为son的父元素的。

例3：

1
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}

　这个例子我只是修改了第一个例子中的css--设置了position:absolute；效果如下：

于是我们发现，现在span的定位是相对于具有position:absolute的属性的class为parent的父元素。

例4：

1
.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}

相对于例1，我添加了fixed的position属性，发现结果和例3是一模一样的。

例5：

1
.parent{position:static; width: 300px;height: 300px;background: #ccc;}

相对于例1，我添加了static的position属性（即html的默认属性），结果和例1是一样的。

综上所述，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。

第五部分：重叠的元素--z-index属性

　　首先声明：z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

       下面我们通过几个例子继续来理解这个属性。

　　例1：

　　

即son1和son2是parent的两个子元素，效果图如下：

这是没有使用z-index，我们发现son2在son1之上，这是因为son2在html中排在了son1之后，所以后来者将前者覆盖，如果我们颠倒以下两者的顺序，就会发现蓝色(son1)在上了。

例2：

在son1中加入z-index：1；可以发现效果如下：

也就是说son2的index值是小于1的。

如果我们给son2也加上z-index:1;呢？结果得到黄色(son2)就在上面了。（因为一旦z-index值相等，情况就和都不设置index值一样了）

例3：

在son2中加入z-index:5;可以发现效果如下：

即黄色(son2)又在上面了，这个很简单，不作过多讨论。

例4：

在父元素添加z-index:10;

在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；

结果如下：

结果没有变!!!!!  这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子：

例5：

把两个子元素的z-index值同时设置为-5；父元素不设置z-index属性。结果如下：

成功！！说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。

例6：

我们在例5的基础上再给父元素添加一个z-index:10，讲道理~应该也可以得到和例5相同的结果吧！！

然而.... 看来我们不能设置父元素的z-index值，否则就不能出现我们想要的效果。下面再看一个有趣的例子!

例7：

我们根据例6的经验不设置父元素的值，现在设置son1(蓝色)的z-index为5，son2的z-index为-5，看下面的结果：

即son1在最上面，父元素在中间，son2在最下面。

对于z-index的探索就这样结束了吗？？当然没有，看下面几个更为有趣的例子吧。

例8：

代码如下：

效果如下：

虽然parent1和parent2分别是son1和son2的父元素，按照我们之前的理解，父元素是不可添加z-index值的，否则会导致错误。但是这里parent1和parent2相对于body又是子元素，他俩是同级的，所以就可以进行比较了。且此时parent1的子元素son1（蓝色）在上。

例9：

如果我们在例7的基础上，把parent2的z-index值设为20，就会发现如下效果：

即parent2在上的同时son2也会同时在上。这也就是所谓的“拼爹”了！！

例10.同样在例7的基础上，我们不设置parent1和parent2和son2的index值，而只设置son1的z-index值为10，效果如下:

即原本在下面的蓝色son1被提上来了，而没有把父元素（parent1）提上了，诶，不孝顺啊！！

例11.显然，在例10的基础上，如果我们把son2的index值设置的比son1的大，如20，那么son2就会覆盖son1了，并且都在两个父元素只上了！！

效果如下图：

例12.当然，如果我们把两个son的z-index都设置位负数如-5，那么两者就都会被父元素所覆盖：

第六部分：脱离文档流导致的问题

　　我们知道如果使用position:absolute和position:fixed都会导致元素脱离文档流，由此就会产生相应的问题。举例如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>position</title>
  5.     <style>
  6.         .div1{
  7.             background-color: red;
  8.             padding:20px;
  9.         }
  10.         .div2{
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: blue;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="div1">
  19.         <div class="div2"></div>
  20.     </div>
  21. </body>
  22. </html>

这时效果如下：

　　即子元素将父元素撑了起来。

　　但是一旦子元素的position为fixed或者是absolute，那么它就会脱离文档流，这样的后果是父元素无法被撑开，如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>position</title>
  5.     <style>
  6.         .div1{
  7.             background-color: red;
  8.             padding:20px;
  9.             position: relative;
  10.         }
  11.         .div2{
  12.             position: absolute; // 添加position:absolute使其脱离文档流
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: blue;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="div1">
  21.         <div class="div2"></div>
  22.     </div>
  23. </body>
  24. </html>

　　最终效果如下所示：

解决方法1：在js中设置父元素高度等于子元素的高度。

解决方法2：给父元素强行设置高度。（对于宽度导致的类似问题就强行设置宽度）

第七部分：position: sticky;

　　这一部分内容是2017-3-13补充的， 之前没有了解到这个属性，几天才知道这个属性就是我经常使用js使用的方法，就是在一个内容中，我们可以固定一个部分，然后到了另一个内容，又会固定另外一个部分。

　　同样也可以设置top值， 这个值是border上边缘和包裹元素的下边缘之间的距离，但是一旦滚动起来，就是和浏览器顶部的距离了，话不多说，直接上demo，一看便懂。

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>alink</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .wrap {
  12.             border: 20px solid blue;
  13.         }
  14.         .header {
  15.             position: sticky;
  16.             top: 20px;
  17.             border: 20px solid red;
  18.             margin-top: 20px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="wrap">
  24.         <div class="header">
  25.             这是头部
  26.         </div>
  27.         <div class="content">
  28.             这是内容部分<br>
  29.             这是内容部分<br>
  30.             这是内容部分<br>
  31.             这是内容部分<br>
  32.             这是内容部分<br>
  33.             这是内容部分<br>
  34.             这是内容部分<br>
  35.             这是内容部分<br>
  36.             这是内容部分<br>
  37.             这是内容部分<br>
  38.             这是内容部分<br>
  39.             这是内容部分<br>
  40.             这是内容部分<br>
  41.             这是内容部分<br>
  42.             这是内容部分<br>
  43.             这是内容部分<br>
  44.             这是内容部分<br>
  45.             这是内容部分<br>
  46.             这是内容部分<br>
  47.             这是内容部分<br>
  48.             这是内容部分<br>
  49.             这是内容部分<br>
  50.             这是内容部分<br>
  51.             这是内容部分<br>
  52.             这是内容部分<br>
  53.             这是内容部分<br>
  54.             这是内容部分<br>
  55.             这是内容部分<br>
  56.             这是内容部分<br>
  57.             这是内容部分<br>
  58.             这是内容部分<br>
  59.             这是内容部分<br>
  60.             这是内容部分<br>
  61.             这是内容部分<br>
  62.             这是内容部分<br>
  63.             这是内容部分<br>
  64.             这是内容部分<br>
  65.             这是内容部分<br>
  66.             这是内容部分<br>
  67.             这是内容部分<br>
  68.             这是内容部分<br>
  69.             这是内容部分<br>
  70.             这是内容部分<br>
  71.             这是内容部分<br>
  72.             这是内容部分<br>
  73.             这是内容部分<br>
  74.             这是内容部分<br>
  75.             这是内容部分<br>
  76.             这是内容部分<br>
  77.             这是内容部分<br>
  78.             这是内容部分<br>
  79.             这是内容部分<br>
  80.             这是内容部分<br>
  81.             这是内容部分<br>
  82.             这是内容部分<br>
  83.             这是内容部分<br>
  84.             这是内容部分<br>
  85.             这是内容部分<br>
  86.             这是内容部分<br>
  87.             这是内容部分<br>
  88.             这是内容部分<br>
  89.             这是内容部分<br>
  90.             这是内容部分<br>
  91.             这是内容部分<br>
  92.             这是内容部分<br>
  93.             这是内容部分<br>
  94.             这是内容部分<br>
  95.             这是内容部分<br>
  96.             这是内容部分<br>
  97.             这是内容部分<br>
  98.             这是内容部分<br>
  99.             这是内容部分<br>
  100.             这是内容部分<br>
  101.             这是内容部分<br>
  102.             这是内容部分<br>
  103.             这是内容部分<br>
  104.             这是内容部分<br>
  105.             这是内容部分<br>
  106.             这是内容部分<br>
  107.             这是内容部分<br>
  108.             这是内容部分<br>
  109.             这是内容部分<br>
  110.             这是内容部分<br>
  111.         </div>
  112.     </div>
  113.     <div class="wrap">
  114.         <div class="header">
  115.             这是另一个头部
  116.         </div>
  117.         <div class="content">
  118.             这是另一个内容<br>
  119.             这是另一个内容<br>
  120.             这是另一个内容<br>
  121.             这是另一个内容<br>
  122.             这是另一个内容<br>
  123.             这是另一个内容<br>
  124.             这是另一个内容<br>
  125.             这是另一个内容<br>
  126.             这是另一个内容<br>
  127.             这是另一个内容<br>
  128.             这是另一个内容<br>
  129.             这是另一个内容<br>
  130.             这是另一个内容<br>
  131.             这是另一个内容<br>
  132.             这是另一个内容<br>
  133.             这是另一个内容<br>
  134.             这是另一个内容<br>
  135.             这是另一个内容<br>
  136.             这是另一个内容<br>
  137.             这是另一个内容<br>
  138.             这是另一个内容<br>
  139.             这是另一个内容<br>
  140.             这是另一个内容<br>
  141.             这是另一个内容<br>
  142.             这是另一个内容<br>
  143.             这是另一个内容<br>
  144.             这是另一个内容<br>
  145.             这是另一个内容<br>
  146.             这是另一个内容<br>
  147.             这是另一个内容<br>
  148.             这是另一个内容<br>
  149.             这是另一个内容<br>
  150.             这是另一个内容<br>
  151.             这是另一个内容<br>
  152.             这是另一个内容<br>
  153.             这是另一个内容<br>
  154.             这是另一个内容<br>
  155.             这是另一个内容<br>
  156.             这是另一个内容<br>
  157.             这是另一个内容<br>
  158.             这是另一个内容<br>
  159.             这是另一个内容<br>
  160.             这是另一个内容<br>
  161.             这是另一个内容<br>
  162.             这是另一个内容<br>
  163.             这是另一个内容<br>
  164.             这是另一个内容<br>
  165.             这是另一个内容<br>
  166.             这是另一个内容<br>
  167.             这是另一个内容<br>
  168.             这是另一个内容<br>
  169.             这是另一个内容<br>
  170.             这是另一个内容<br>
  171.             这是另一个内容<br>
  172.             这是另一个内容<br>
  173.             这是另一个内容<br>
  174.             这是另一个内容<br>
  175.             这是另一个内容<br>
  176.             这是另一个内容<br>
  177.             这是另一个内容<br>
  178.             这是另一个内容<br>
  179.             这是另一个内容<br>
  180.             这是另一个内容<br>
  181.             这是另一个内容<br>
  182.             这是另一个内容<br>
  183.             这是另一个内容<br>
  184.         </div>
  185.     </div>
  186. </body>
  187. </html>

第八部分：总结

　    这一部分知识还是非常有意思的，希望大家可以继续探索，当然如果通过这篇博文给予大家一点点的帮助那就再好不过了！

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. 转：深入理解css中position属性及z-index属性

    原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...

  3. 理解CSS中position的各个值

    static position的默认值,没有定位,元素在normal flow中: fixed 相对于浏览器左上角定位: relative 相对定位元素,其位置根据其在normal flow中的位置来 ...

  4. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

随机推荐

  1. Mybatis类型转换BUG

    案例:mybatis框架的使用中是否遇到过前台传入数据后mybatis后台并不执行sql的情况呢? 比如:前台传入一个状态var flag //空字符,0,1 然后你用int接收,到mybatis框架 ...

  2. Revit二次开发之获取本机已安装的Revit版本与路径

    在revit安装目录下找到 RevitAddInUtility.dll 在项目中引用 使用以下方法 using Autodesk.RevitAddIns; /// <summary> // ...

  3. [ Skill ] 图形化组件在注册 User Trigger 时需要注意的事情

    https://www.cnblogs.com/yeungchie/ 使用 deRegUserTriggers 可以用来配置:当打开一个新窗口时,自动集成自定义的菜单.工具栏等等. 使用格式如下: d ...

  4. Codeforces 690A2 - Collective Mindsets (medium)

    Codeforces 题面传送门 & 洛谷题面传送门 一道脑筋急转弯的结论题. 首先我们考虑对于某个特定的金币数 \(m\),有哪些 \(n\) 满足条件.考虑最 naive 的情况,\(m= ...

  5. Codeforces 917C - Pollywog（状压 dp+矩阵优化）

    UPD 2021.4.9:修了个 typo,为啥写题解老出现 typo 啊( Codeforces 题目传送门 & 洛谷题目传送门 这是一道 *2900 的 D1C,不过还是被我想出来了 u1 ...

  6. xshell的快捷复制粘贴设置

    今天试着用xshell连接Linux,运行一些命令的时候想快点复制粘贴实现效率,却发现还要右键选择复制,再右键选择粘贴,很是麻烦. 看了一下xshell的设置,其实可以自己设置成快捷方式 以xshel ...

  7. 进程和线程操作系统转载的Mark一下

    https://www.cnblogs.com/leisure_chn/p/10393707.html Linux的进程线程及调度 本文为宋宝华<Linux的进程.线程以及调度>学习笔记. ...

  8. idea数据库报错java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

    通过idea操作数据库,进行数据的增加,运行时报错java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 原因:没有导入mysql-connec ...

  9. 微信小程序的wx.login用async和data解决code不一致的问题

    由于wx.login是异步函数,导致在我们获取微信小程序返回的code去请求我们的登录接口时code的值会异常.现在用promise封装一下,将他success的结果返回,在登陆函数中await就可以 ...

  10. 深入理解mysql锁与事务隔离级别

    一.锁 1.锁的定义     锁即是一种用来协调多线程或进程并发使用同一共享资源的机制 2.锁的分类 从性能上分类:乐观锁和悲观锁 从数据库操作类型上分类:读锁和写锁 从操作粒度上分类:表锁和行锁 2 ...