css布局中的定位问题

CSS position 属性

实例定位

h2 元素：

h2  {  position:absolute;  

left:100px;

top:150px;  }

在上例中，left:100px 表示距离元素的原始左侧位置为100 像素(即向右移动了100px)

top:150px表示距离元素的原始上边位置为150px(即向下移动了150px)

注：这些值可以取负数，如left:-20px，它表示距离元素的原始左侧位置为-20像素(即向左移动了20px)

其中absolute和fixed的区别:

fixed相当于固定在浏览器的窗口的某个位置，无论屏幕怎么滚动，它在屏幕的位置不会改变

absolute是想对于其包含块定位，它随屏幕滚动

relative和absolute的区别

两者都是按相同的方法移动位置

relative       原本所占的空间仍保留。

absolute    元素框从文档流完全删除，就好像原来的元素不存在一样

在position属性中相对定位，绝对定位，固定定位的值可以接受长度值(em,px等)，也可以接受百分比值

z-index必须在position中才能发挥作用，单独使用是不能发挥作用的

其中z-index:0是默认值z-index的值可以是正数，也可以是负数

如：Z-index: 1 拥有更高的优先级

Z-index :-1 拥有更低的优先级

z-index的值越大，拥有的优先权越高CSS

绝对定位绝对定位使元素的位置与文档流无关，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。