下载文档原格式
深⼊理解css中position属性及z-index属性深⼊理解css中position属性及z-index属性 在⽹页设计中，position属性的使⽤是⾮常重要的。
有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。
position属性共有四种不同的定位⽅法，分别是static、fixed、relative、absolute,sticky。
最后将会介绍和position属性密切相关的z-index属性。
第⼀部分：position: static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
如html代码如下：<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;} 效果图如下：我们发现，虽然设置了static以及top，但是元素仍然出现在正常的流中。
第⼆部分：fixed定位 fixed定位是指元素的位置相对于浏览器窗⼝是固定位置，即使窗⼝是滚动的它也不会滚动，且fixed定位使元素的位置与⽂档流⽆关，因此不占据空间，且它会和其他元素发⽣重叠。
html代码如下：<div class="content">我是使⽤fix来定位的！！！所以我相对于浏览器窗⼝，⼀直不动。
</div> css代码如下：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才能⽀持。
css四种定位浮动和定位的分别：浮动⽬的是多个块级元素⼀⾏显⽰定位主要是移动位置，让盒⼦移动到想要的位置上去⼀、position：static静态定位：对于边偏移⽆效的（left，top属性⽆效），⼀般⽤来清除定位，⼀个原来有定位的盒⼦，不想加定位了，就⽤这个⼆、position：relative相对定位：不脱离标准流，是相对盒⼦元素原有的位置进⾏偏移，设定垂直⽅向和⽔平⽅向，left,top,rigit,bottom，不会对其他元素产⽣影响三、position：relative相对定位：不脱离标准流，是相对盒⼦元素原有的位置进⾏偏移，设定垂直⽅向和⽔平⽅向，left,top,rigit,bottom，不会对其他元素产⽣影响，原来的位置继续占有四、position：absolute绝对定位：脱离标准流，如果⽗亲没有定位，以浏览器为基准进⾏定位；1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/>5<style type="text/css">6 .father {7 width: 300px;8 height: 300px;9 background-color: pink;10 margin: 100px;11 }1213 .son {14 width: 100px;15 height: 100px;16 background-color: purple;17 position: absolute;18 top: 15px;19 left: 15px;20 }21</style>22<title></title>23</head>24<body>25<div class="father">26<div class="son">孩⼦跑⾛了</div>27</div>2829</body>30</html>⽗亲有定位，以⽗亲为基准定位，⼀种relative，也可以是absolute；1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/>5<style type="text/css">6 .father {7 width: 300px;8 height: 300px;9 background-color: pink;10 margin: 100px;11 position: relative;/*⽗亲有定位*/12 }1314 .son {15 width: 100px;16 height: 100px;17 background-color: purple;18 position: absolute;19 top: 15px;20 left: 15px;21 }22</style>23<title></title>24</head>25<body>26<div class="father">27<div class="son">孩⼦跑⾛了</div>28</div>2930</body>31</html>应⽤：⼦绝⽗相1.相对定位占有位置不脱标2.绝对定位不占有位置完全脱标应⽤图⽚滚动五、position：fixed固定定位：fixed定位的参照物总是当前的⽂档。
CSS通过设置position定位的三种常⽤定位 CSS中可以通过设置为元素设置⼀个position属性值，从⽽达到将不同的元素显⽰在不同的位置，或者固定显⽰在某⼀个位置，或者显⽰在某⼀层页⾯之上。
position的值可以设为relative，absolute，fixed，static。
HTML代码⾥定义两个区块：1<div class="box">2<div class="box1"></div>3</div> 1.相对定位：1.box {2 width: 50px;3 height: 50px;4 position: relative;5 top: 50px;6 left: 10px;7 }以上代码将实现将box以box最初的位置向右移动50px，向下移动10px。
2.绝对定位：1.box1 {2 width: 10px;3 height: 20px;4 position: absolute;5 top: 10px;6 left: 10px;7 }以上代码将实现将box1的位置以当前的视⼝位置的原点为基准位置进⾏移动相应得距离；如果将box1的⽗级设置了relative，那么box1将会以box的原点进⾏位移。
1.box {2 position: relative;3 }4.box1 {5 width: 10px;6 height: 20px;7 position: absolute;8 top: 10px;9 left: 10px;10 } 3.固定定位：1.box {2 width: 50px;3 height: 50px;4 position: fixed;5 top: 20px;6 left: 0px;7 }以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。
使⽤注意点：1.绝对定位会使元素脱离⽂档流，位于定位元素后⾯的元素将会移动到该元素的位置去填补空⽩区域；2.⼀般情况下，绝对定位都会和ixnagdui相对⼀起使⽤；3.使⽤fixed和absolute时，⼀定要认清谁是基准位置。
CSS属性：定位属性（图⽂详解）CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
position: absolute; <!-- 绝对定位 -->position: relative; <!-- 相对定位 -->position: fixed; <!-- 固定定位 -->下⾯逐⼀介绍。
相对定位相对定位：让元素相对于⾃⼰原来的位置，进⾏位置调整（可⽤于盒⼦的位置微调）。
我们之前学习的背景属性中，是通过如下格式：background-position:向右偏移量向下偏移量;但这回的定位属性，是通过如下格式：position: relative;left: 50px;top: 50px;相对定位的举例：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style type="text/css">body{margin: 0px;}.div1{width: 200px;height: 200px;border: 1px solid red;}.div2{position: relative;/*相对定位：相对于⾃⼰原来的位置*/left: 50px;/*横坐标：正值表⽰向右偏移，负值表⽰向左偏移*/top: 50px;/*纵坐标：正值表⽰向下偏移，负值表⽰向上偏移*/width: 200px;height: 200px;border: 1px solid red;}</style></head><body><div class="div1">有⽣之年</div><div class="div2">狭路相逢</div></body></html>效果：相对定位不脱标相对定位：不脱标，⽼家留坑，别⼈不会把它的位置挤⾛。
css中相对（relative）与绝对（absolute）定位用法详解
CSS中的定位(position)常用的属性有两个：relative(相对)和absolute(绝对)。
有很多人对这两个的用法还不是很清楚，这里做一些细致的讲解。
position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。
padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。
position:absolute; 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。
那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。
于是产生了一个问题：现在大家做的网页大部分是居中的，如果我需要这个元素跟着网页中的某个元素位置，不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的，靠单纯的absolute是不行的。
正确的解决方法是：在元素的父级元素定义为position:relative;(这里可以是祖父级，也可以是position:absolute;，多谢谢old9的提出)需要绝对定位的元素设为position:absolute;
这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧。
CSS中position属性介绍 position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这⾥sticky是CSS3新发布的⼀个属性。
1、position: static static(没有定位)是position的默认值，元素处于正常的⽂档流中，会忽略left、top、right、bottom和z-index属性。
2、position: relative relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离⽂档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
3、position: absolute absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况： 1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素，则此时相对于body进⾏定位。
4、position: fixed 可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。
5、inherit 继承⽗元素的position属性，但需要注意的是IE8以及往前的版本都不⽀持inherit属性。
在讲sticky之前，先上代码： html：<h5>Relative</h5><div class="div-container div-container1"><div class="div1">static1</div><div class="div2">relative1</div><div class="div3">static1</div></div><h5>Absolute</h5><div class="div-container div-container2"><div class="div1">static2</div><div class="div2">absolute2</div><div class="div3">static2</div></div><h5>Relative contains Absolute</h5><div class="div-container div-container3"><div class="div1">static3</div><div class="div2">absolute3</div><div class="div3">static3</div></div><h5>Absolute contains Absolute</h5><div class="div-container div-container4"><div class="div1">static3</div><div class="div2">absolute3</div><div class="div3">static3</div></div>6、sticky position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性⽆效），当该元素的位置将要移出偏移范围时，定位⼜会变成fixed，根据设置的left、top等属性成固定位置的效果。
CSSposition居中（⽔平，垂直）css position是个很重要的知识点：知乎Header部分：知乎Header-inner部分：position属性值：fixed：⽣成绝对定位的元素，相对浏览器窗⼝进⾏定位（位置可通过：left,right,top,bottom改变）;与⽂档流⽆关，不占据空间（可能与其它元素重叠）relative：⽣成相对定位的元素（相对于元素正常位置）（left，right，top，bottom）；relative的元素经常⽤作absolute的元素的容器块;原先占据的空间依然保留absolute：⽣成绝对定位的元素（相对第⼀个已定位的⽗元素进⾏定位；若没有则相对<html>）（left,right,top,bottom）；与⽂档流⽆关，不占据空间（可能与其它元素重叠）static：默认值。
没有定位，元素出现在正常的⽂件流中（left,right,top,bottom,z-index⽆效！）inherit：继承从⽗元素的position值fixed⽰例：1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<meta http-equiv="X-UA-Compatible" content="ie=edge">7<title>cascading style sheet</title>8<style>9 #test{10 width: 500px;11 height: 100px;12 position: fixed;13 top: 0px;14 left: 500px;15 border: 1px solid burlywood;16 background-color: #F2F2F2;17 z-index: 2;18 }19 .test1{20 margin-top: 100px;21 }22 .test1, .test2, .test3, .test4, .test5{23 width: 200px;24 height: 300px;25 border: 1px solid black;26 position: relative;27 left: 500px;28 background-color: gray;29 }30</style>31</head>32<body>33<div id="test"></div>34<div class="test1">1</div>35<div class="test2">2</div>36<div class="test3">3</div>37<div class="test4">4</div>38<div class="test5">5</div>3940</body>41</html>View Code#test部分始终固定在上⽅，不发⽣移动。
CSS之定位总体介绍下：CSS有3中定位机制，普通流【各元素按照HTML文档的顺序依次显示】，浮动，绝对定位。
1.相对定位position = relative.顾名思义：相对与自己定位。
相对定位，元素设置left,top,bottom,right会相对与自己原来的位置，移动自己的位置。
不管是否移动，它所占据的空间仍然是原来的空间【一定占据了原来的空间】。
移动元素可能会覆盖其他的元素。
2.绝对定位position = absolute.定位相对于它的祖先定位。
仔细观察上图，定位是你根据它的祖先，不是它原来的位置。
祖先：包含绝对定位元素的最近一层设置position:relative；position:absolute的元素；没有就根据文档定位，完全脱离文档流，不占据一点空间【相对定位是占据空间的】，所以可以设置z-index【这个属性知道用处吧】属性。
由于相对定位和绝对定位配合使用，用处太大，写几个例子给你看看。
帮助理解的小例子：例子1：/*********************************效果图**************************************/以前是不是想在导航条某个位置显示下时间。
Now you can do it !/*****************************************************************************/ <div id="nav"><div id="date">2013-07-26</div></div>/*****************************************************************************/ <style type="text/css">#nav{width: 60%;height: 50px;border: 1px solid red;position: relative;}#nav #date{height: 20px;border: solid 1px #ccc;position: absolute;right: 3px;bottom: 3px;}</style>例子2：/*********************************效果图**************************************//*****************************************************************************/ <form><fieldset><legend>用户信息</legend><div><label for="username">Username:</label><input type="text" name="username" id="username"/></div><div><label for="password">password:</label><input type="text" name="password" id="password"/></div><div><label for="email">email:</label><input type="text" name="email" id="email"/><em>the email's format incorrect !</em></div></fieldset></form>会不会觉得使用fieldset，legend，label很奇怪，建议在没有很好的方法前，你的所有的表单模仿上面的代码。
演示：<html><head><style type="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2 class="pos_abs">这是带有绝对定位的标题</h2><p>通过绝对定位，元素可以放置到页面上的任何位置。
下面的标题距离页面左侧100px，距离页面顶部150px。
</p></body></html>演示图：相关：CSS中position的absolute和relative 的应用之前老弄不明白，只能凭借一点短期内“虐出来的经验”制作需要的效果，后来仔细研究了一下Hutia的XScroller，并且仔细看了文档，才知道这个position属性其实是指本体对上级的定位。
如果这么理解，就好办了。
默认的属性值都是static，静态。
就不用多说了。
最关键的是relative（相对）以及absolute（绝对）。
往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。
然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。
这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。
我一开始也无能为力，后来发现只要把其上一级的样式属性position设置为relative就可以了。
也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构<div id="A"><div id="B"></div></div>当A的position为relative时，B的position为absolute才有效。
