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

时间 2019-11-11

标签深刻理解 css position 属性 index 栏目 CSS 繁體版

原文原文链接

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

　　在网页设计中，position属性的使用是很是重要的。有时若是不能认识清楚这个属性，将会给咱们带来不少意想不到的困难。php

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

第一部分：position: static

　　static定位是HTML元素的默认值，即没有定位，元素出如今正常的流中，所以，这种定位就不会收到top，bottom,left,right的影响。html

　　如html代码以下：java

	<div class="wrap">
		<div class="content"></div>
	</div>

　　css代码以下：浏览器

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

　　效果图以下：spa

咱们发现，虽然设置了static以及top，可是元素仍然出如今正常的流中。设计

第二部分：fixed定位

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

　　html代码以下：code

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

　　css代码以下：htm

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以下：

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

　　css代码以下：

.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代码以下：

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

　　css代码以下：

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

　　效果图以下：

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

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

　第四部分：absolute定位

　　绝对定位的元素相对于最近的已定位父元素，若是元素没有已定位的父元素，那么它的位置相对于<html>。

下面举几个例子：

　　例子1：

<!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:

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

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

因而，咱们发现如今span的位置是相对于设有position属性的class为son的父元素的。

例3：

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

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

因而咱们发现，如今span的定位是相对于具备position:absolute的属性的class为parent的父元素。

例4：

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

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

例5：

.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都会致使元素脱离文档流，由此就会产生相应的问题。举例以下：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

这时效果以下：

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

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

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
            position: relative;
        }
        .div2{
            position: absolute; // 添加position:absolute使其脱离文档流
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

　　最终效果以下所示：

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

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

第七部分：position: sticky;

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alink</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .wrap {
            border: 20px solid blue;
        }
        .header {
            position: sticky;
            top: 20px;
            border: 20px solid red;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            这是头部
        </div>
        <div class="content">
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
        </div>
    </div>
    <div class="wrap">
        <div class="header">
            这是另外一个头部
        </div>
        <div class="content">
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
            这是另外一个内容<br>
        </div>
    </div>
</body>
</html>

第八部分：总结

　这一部分知识仍是很是有意思的，但愿你们能够继续探索，固然若是经过这篇博文给予你们一点点的帮助那就再好不过了！