css 定位

一、css的三种定位属性

1. 相对定位 position: relative;

元素相对于自己原来的位置，进行位移。

特性：

1,不脱离文档流;其他元素不受影响
2,相对于自己的文档流上下左右定位
3,层级高于其他元素
4,使用属性:top bottom left right。

属性值

指的是向哪个方向留出多少距离，例如left:50px;在左边留出50px,元素右移。和margin差不多意思。

我们给出两个div，div1加上相对定位看效果。

<style type="text/css">	body{margin: 0px;}/*相对定位：相对于自己原来的位置*/.div1{/*position: relative;left: 50px;top: 50px;*/width: 200px;height: 200px;border: 1px solid red;/*background-color: red;*/}.div2{width: 200px;height: 200px;border: 1px solid red;/*background-color: yellow;*/}</style><div><div class="div1">div1</div><div class="div2">div2</div>	</div>

没给定位前可看到div1的位置在左上角，现在我们给div1一个相对定位，并且1,2都设置背景颜色。

可以看到div1相对于自己原来的位置向右下各移了50px，且没有影响到div2，并且加颜色后发现，div1覆盖住了部分div2，说明它的层级高于其他元素，但是div2并没有移动到顶端上去，说明div1没有脱离文档流。

应用**

调整元素的位置，但是一般不用定位来调位置，用margin等比较多，所以它最大的应用就是作为父容器，用于绝对定位的参考。

2.绝对定位 position: absolute;

特性:

1,脱离文档流，底下的元素受到了影响
2,层级高于其他元素;
3,转化为内联块标签;
4,使用属性:top bottom left right

定位参考点：

**如果用top

定位参考点就是页面的左上角，而不是浏览器（即屏幕）的左上角.

<style type="text/css">	body{margin: 0px;}.div1{width:200px;height:200px; background-color:red; position:absolute; top:20px;       left:20px; border:1px red solid; }.div2{width: 200px;height: 200px;border: 1px solid red;background-color: yellow;}</style>

可以看到div1以页面顶端为基准，右下各偏移了20px,且div2已经顶上来了。

如果用bottom，

定位参考点就是浏览器首屏幕（即屏幕）窗口所对应的页面的左下角.

我们举个例子理解一下：

给div2一个相对于浏览器的绝对定位。

浏览器首屏的意思是，整个浏览器页面在屏幕上的高度，假如为1366px,bottom所做的向上偏移10px，div2的底部边缘距离浏览器页面底部就是10px。这样我们都理解。

但是当div2下面还有很多内容时，浏览器就可以上下滑动了，页面高度>1366px,此时div2就会跟着上下滑动，不会一直在浏览器底部10px。可以理解为浏览器页面首屏是一个height为1366px的框，div2在它里面，浏览器滑动，div2自然跟着滑动上去了。

页面未滑动时div2还在最底部10px.

页面滑动时，首屏滑上去了，div2跟着上去了。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">	body{margin: 0px;}.div1{width:200px;height:200px; background-color:red; /*position:absolute;*/ top:20px;       left:20px; border:1px red solid; }.div2{width: 200px;height: 200px;border: 1px solid red;background-color: yellow;position:absolute;    bottom:10px;   /* 首屏底部为基准  */left:10px;}</style></head>
<body><div><div class="div1">div1</div><div class="div2">div2</div><!--<hr /><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p><hr /><p>balalalall</p></div>--></body></html>

如果父元素有定位

以就近的父元素(如果父元素没定位,就以爷爷作为参考点),做偏移.

一定是有定位的上级元素才可以，假设子绝对定位，父没有定位，爷爷有定位，那么要以爷爷为基准，如果父也有定位，那么就以父做基准。

一般这种情况用的多，父元素relative，子元素absolute，子相对于父做定位。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">	body{margin: 0px;}.father{position: relative; /* 用relative不脱离文档流*/border: 5px solid yellow;width: 480px;height: 400px;}.div2{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;position:absolute;    bottom:10px;   left:10px;}</style>
</head>
<body><div class="father">father<div class="div2">div2</div></div>
</body></html>

3.固定定位 position: fixed;

特性

1,脱离文档流;底下的元素受到了影响
2,层级高于其他元素;
4,转化为内联块标签;
5,相对于整个浏览器来定位
6,使用属性:top bottom left right

固定定位和以bottom定位的absolute不同，它是相对于浏览器定位的，不管浏览器滑动了多少高度，它都在页面某个位置。或顶部，或底部，或左。

应用

一般用作固定某元素在屏幕上，例如，导航，点击图标返回首页等

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">	body{margin: 0px;}.father{position: relative; /* 用relative不脱离文档流*/border: 5px solid yellow;width: 480px;height: 200px;}.div2{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;position:absolute;    top:300px;   left:10px;}</style>
</head>
<body><div class="father">father<div class="div2">div2</div></div><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p><p>balalalllll</p>
</body></html>

4.z-index特性

首先，我们都知道，有定位的元素能压住没有定位的元素，那么都有定位，决定谁在上面用z-index。

z-index;相同位置时覆盖,数值大的在上面，只能在定位里使用。

默认的z-index值是0。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">	body{margin: 0px;}.div1{position: fixed; /* 用relative不脱离文档流*/background-color:red;width: 200px;height: 200px;top:20px;z-index: 2;}.div2{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;position:fixed;  top:50px; z-index: 3; /*z-index: 1;*/ }</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div></body></html>