css中position属性稍微有些复杂。下面展开讨论:
一、有五种值:
1 absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。Absolutely定位使元素的位置与文档流无关,因此不占据空间。
2 fixed:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。
3 relative :相对定位元素的定位是相对其正常位置。元素没有脱离正常的流。
4 static: HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。
5 inherit:规定应该从父元素继承 position 属性的值。
二、组合(实际上是上面说法的应用)
假设<div>a、b嵌套在<div>main 中,<p>黄爽是个小公主在main之后,body之内
1.若main设置为relative,a、b设置为relative则出现从侧面反映了relative是占位的,main保存了a、b的占位。
2 若main设置为relative,a 设置为relative,b设置为absolute,则出现也就是说relative是占位的,但是absolute并没有占位。main保存了a的占位,没有保存b的占位,但是b的位置位于文档流a之后。
3 若main设置为absolute,a、b设置为relative,则即main没有占位,main里面保存了a、b的相对占位。
4 若main设置为absolute,a设置为absolute b设置为relative,则即main没有占位,main里面保存了b的占位信息,a是相对于main的绝对位置。
经验:判断一个元素的位置,找到父元素,根据父元素的定位,根据该元素的定位属性来判断定位。当然可以利用父元素子元素的定位关系来设置页面,譬如说下拉页面。