CSS之position用法测试归纳

来源：互联网发布：淘宝店铺三个月未经营编辑：程序博客网时间：2024/06/06 15:41

前言

在工作中经常遇到一些元素的定位问题，很多对css不熟悉的朋友甚是头痛，我整理了自己对position用法的理解，并通过demo演示让大家有个较好的理解，也顺带巩固一下自己对position的认识。

简介

关于position的介绍请参考：
w3c菜鸟教程：http://www.runoob.com/css/css-positioning.html
或 W3CSchool的官网：http://www.w3school.com.cn/css/css_positioning.asp
这里我简单介绍position的用法，建议先阅读W3C的内容了解基本概念（我个人感觉W3C对position这边的讲解不够详细，不够形象，所以我自己又做了一些测试）。
position属性有四个可选值，分别为：fixed 、absolute、relative、static
下面我开始通过不同的demo来演示position的一些特性及用法。

position中不同属性的定位规律

元素的叠放次序

下面两段代码样式完全一样，只是div的次序不一样，比较一下它们的叠放次序；
demo001.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .s-div {            width: 200px;            height: 100px;        }        .rel-1 {            border: 1px solid red;            background-color: red;            position: relative;            top: 10px;            left: 10px;        }        .abs-1 {            border: 1px solid yellow;            background-color: yellow;            position: absolute;            top: 50px;            left: 50px;        }        .fix-1 {            border: 1px solid blue;            background-color: blue;            position: fixed;            top: 100px;            left: 100px;        }      </style></head><body><!--注意对比这里--><div class="s-div rel-1"></div><div class="s-div abs-1"></div><div class="s-div fix-1"></div></body></html>

demo002.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .s-div {            width: 200px;            height: 100px;        }        .rel-1 {            border: 1px solid red;            background-color: red;            position: relative;            top: 10px;            left: 10px;        }        .abs-1 {            border: 1px solid yellow;            background-color: yellow;            position: absolute;            top: 50px;            left: 50px;        }        .fix-1 {            border: 1px solid blue;            background-color: blue;            position: fixed;            top: 100px;            left: 100px;        }    </style></head><body><!--注意对比这里--><div class="s-div fix-1"></div><div class="s-div abs-1"></div><div class="s-div rel-1"></div></body></html>

这是上面两段代码的效果对比展示：
对比1
由对比图可见，当使用了position定位时，不会影响文档的叠放次序，所有元素将按照代码编写时的先后顺序依次往上层叠加（即先写的元素在后写的元素下层，后写的可以覆盖先写出来的元素）

元素相对父容器的定位方式

当三个元素被赋予不同的position值定位时，展示出不同的效果。
先看一段代码：

父容器没有添加position属性

demo003.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .s-div {            width: 200px;            height: 100px;        }        .rel-1 {            border: 1px solid red;            background-color: red;            position: relative;            top: 10px;            left: 10px;        }        .abs-1 {            border: 1px solid yellow;            background-color: yellow;            position: absolute;            top: 50px;            left: 50px;        }        .fix-1 {            border: 1px solid blue;            background-color: blue;            position: fixed;            top: 100px;            left: 100px;        }        .p-div {            width: 600px;            height: 1200px;            border: 1px solid green;        }    </style></head><body><div class="p-div">    <div class="s-div fix-1"></div>    <div class="s-div abs-1"></div>    <div class="s-div rel-1"></div></div></body></html>

移动父元素对比效果：

由上图可知，当移动父元素时：
relative元素会跟随父元素移动；
absolute的元素不会随着父元素移动，但会随着滚动条的滚动向上移动；
fixed的元素始终与文档的左上角顶点保持相对静止，不会随着父元素的移动而移动，也不会随着滚动条的滚动而移动；（是不是想到了很多网站右下角的广告？滚动条怎么滚动，它都在那）

父容器添加了absolute属性

demo004.html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .rel-1 {            width: 100px;            height: 100px;            border: 1px solid red;            background-color: red;            position: relative;            top: 10px;            left: 10px;        }        .abs-1 {            width: 150px;            height: 100px;            border: 1px solid yellow;            background-color: yellow;            position: absolute;            top: 50px;            left: 50px;        }        .fix-1 {            width: 200px;            height: 100px;            border: 1px solid blue;            background-color: blue;            position: fixed;            top: 100px;            left: 100px;        }        .p-div-2 {            border: 1px solid green;            position: absolute;            left: 0;            top: 0;        }    </style></head><body><div class="p-div p-div-2">    <div class="s-div fix-1"></div>    <div class="s-div abs-1"></div>    <div class="s-div rel-1"></div></div></body></html>

父容器大小变化：
这里写图片描述
当父容器添加了position属性后，父容器（div）变成了行内元素（不占一整行），且大小为relative元素的大小+自身边框大小，即父元素大小再在受absolute、fixed元素的影响。

父容器位置移动：
这里写图片描述
当父容器移动时，relative元素和absolute元素均跟着父元素一起移动，fixed元素始终未改变位置。

父容器添加了relative属性时

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .rel-1 {            width: 100px;            height: 100px;            border: 1px solid red;            background-color: red;            position: relative;            top: 10px;            left: 10px;        }        .abs-1 {            width: 150px;            height: 100px;            border: 1px solid yellow;            background-color: yellow;            position: absolute;            top: 50px;            left: 50px;        }        .fix-1 {            width: 200px;            height: 100px;            border: 1px solid blue;            background-color: blue;            position: fixed;            top: 100px;            left: 100px;        }        .p-div-2 {            border: 1px solid green;            position: relative;            left: 0;            top: 0;        }    </style></head><body><div class="p-div p-div-2">    <div class="s-div fix-1"></div>    <div class="s-div abs-1"></div>    <div class="s-div rel-1"></div></div></body></html>

这里写图片描述
父容器大小变化：
当父容器添加了relative属性后，父容器（div）仍是块元素（占一整行，但宽度不再是100%，而是100%减去左边缩进的距离剩下的宽度）；
父容器位置移动：
当父容器移动时，relative元素和absolute元素均跟着父元素一起移动，fixed元素始终未改变位置。

父容器添加了fixed属性时

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .rel-1 {            width: 100px;            height: 100px;            border: 1px solid red;            background-color: red;            position: relative;            top: 10px;            left: 10px;        }        .abs-1 {            width: 150px;            height: 100px;            border: 1px solid yellow;            background-color: yellow;            position: absolute;            top: 50px;            left: 50px;        }        .fix-1 {            width: 200px;            height: 100px;            border: 1px solid blue;            background-color: blue;            position: fixed;            top: 100px;            left: 100px;        }        .p-div-2 {            border: 1px solid green;            position: fixed;            left: 0;            top: 0;        }    </style></head><body style="height: 1200px"><div class="p-div p-div-2">    <div class="s-div fix-1"></div>    <div class="s-div abs-1"></div>    <div class="s-div rel-1"></div></div></body></html>

这里写图片描述
当父容器添加了fixed属性时，其效果与absolute类似：
宽度变成了relative子元素的宽度（不受absolute、fixed元素大小影响）；
当父容器位置移动时，relative及absolute元素跟随移动，fixed元素不跟随移动。
此外，fixed父元素还多了一个特点：其中所有子元素均不随滚动条滚动而移动

元素相对兄弟元素的定位方式

元素不增加position属性

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .p-div{            width: 800px;        }        .s-div{            width: 300px;            height: 100px;        }        .s-div-1{            background-color: #0089d1;        }        .s-div-2{            background-color: #5522dd;        }        .s-div-3{            background-color: #dd5522;        }    </style></head><body style="height: 1200px"><div class="p-div">    <div class="s-div s-div-1"></div>    <div class="s-div s-div-2"></div>    <div class="s-div s-div-3"></div></div></body></html>

这里写图片描述
由图可见，当不增加position属性时，若修改了div元素的margin值，该元素会覆盖先前的元素，且后续元素会跟随该元素移动，且父容器大小也会跟着所有元素的总大小而变化：
修改margin-top值，后续元素会跟随该元素上下移动，父容器高度变小；
修改margin-left值，后续浮动元素（与该元素在同一行的元素）会跟随该元素左右移动，父容器宽度固定，元素宽度总和大于父容器大小时，元素自动换行（这里不清楚请转float属性的介绍）；
由于行内元素不能指定宽度，这里暂不介绍；

元素增加relative属性

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .p-div{            width: 800px;        }        .s-div{            width: 300px;            height: 100px;        }        .s-div-1{            background-color: #0089d1;        }        .s-div-2{            background-color: #5522dd;            position: relative;            top: 0;            left: 0;        }        .s-div-3{            background-color: #dd5522;        }    </style></head><body style="height: 1200px"><div class="p-div">    <div class="s-div s-div-1"></div>    <div class="s-div s-div-2"></div>    <div class="s-div s-div-3"></div></div></body></html>

当元素增加了relative属性后，修改元素的margin值时，同上一例类似：
该元素可覆盖先前元素，后续元素跟随该元素移动；

由于增加了relative属性，我们可以修改top、left等属性的值，见下图：
这里写图片描述
可发现，当修改了top值时，该元素会覆盖先前的元素，后续元素也不会跟随该元素上下移动；
当后续元素和该元素在同一行时，修改left值，后续元素也不会跟随该元素左右移动；

元素增加absolute属性

由前面的absolute属性测试，我们这里可以猜测：
元素增加了absolute属性后不会对兄弟元素及父容器产生影响。
接下来看代码及效果：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <script src="" type="text/javascript"></script>    <style>        .p-div{            width: 1000px;            border: 1px solid green;        }        .s-div{            width: 300px;            height: 100px;            /*float: left;*/        }        .s-div-1{            background-color: #0089d1;        }        .s-div-2{            background-color: #5522dd;            position: absolute;            top: 0;            left: 0;        }        .s-div-3{            background-color: #dd5522;        }    </style></head><body style="height: 1200px"><div class="p-div">    <div class="s-div s-div-1"></div>    <div class="s-div s-div-2"></div>    <div class="s-div s-div-3"></div></div></body></html>

这里写图片描述
由图可知，修改了margin-top和top值均没有对父容器和后续元素的位置和大小产生影响，可见我们的猜想是正确的。
剩下的还有fixed 和static我就不一一尝试了，根据前面的测试也大致可以猜测结果，而且我的测试结果也如我所料。
具体想知道的就动手试试，这样印象更深刻。

关于float用法

float的用法，我感觉W3C的说明足够用，我的理解感觉也不会比它好很多，所以这里就只贴一些W3C的链接，不做赘述。
W3C官网：http://www.w3school.com.cn/css/css_positioning_floating.asp
W3C菜鸟：http://www.runoob.com/css/css-float.html

结束语

至此demo的演示及对比结束，这里主要介绍了position中relative、absolute、fixed的用法，static属性我很少用到，这里暂不介绍（W3C文档中static ：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。）
关于position属性可能还有其它特性，我暂时还没发现，欢迎补充，且本文为笔者个人理解，如有错误，还望指出。

0 0