css_position

来源：互联网发布：大学蹭课软件编辑：程序博客网时间：2024/05/16 07:42

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的绝对位置。

经验：判断一个元素的位置，找到父元素，根据父元素的定位，根据该元素的定位属性来判断定位。当然可以利用父元素子元素的定位关系来设置页面，譬如说下拉页面。

0 0