css (5) 脱离文档流 - 定位position

 

 

CSS中重要的东西就三个：盒模型、浮动、定位。

 

 

position:relative; 脱离文档流，但保留原来的位置！

 

相对定位就是相对自己原来的位置，进行位置移动。移动的时候需要使用定位值。

top：正数向下移动

bottom： 正数向上移动

left：正数向右移动

right：正数向左移动

 

position:absolute; 

绝对定位的元素，脱离标准文档流。用top、bottom、left、right来进行定位。参考的是页面的左上角。

参照点:   离自己最近的、已经定位了的祖先盒子

1    <style type="text/css">
2        div{
3            width: 600px;
4            height: 200px;
5            background-color: yellowgreen;
6            position: absolute;    
7            left:50%;　　绝对定位的元素居中
8            top: 0;
9            margin-left: -300px; 　　要往回拉一半的自己宽度

10        }
    </style>

 

 

固定定位:  fixed

　　position: fixed;　　

　　固定定位的参考点一定是浏览器

 

 

z-index 叠压顺序

　　压盖顺序：

　　　　1） 定位了的能够压住没有定位的；

　　　　2） 如果都定位了，那么HTML顺序后面的能够压住前面的；