css中的绝对定位和相对定位

html-css014

css中的绝对定位和相对定位,第1张

css中的绝对定位，意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。

css中的相对定位，意思是是相对于上一个相对定位的，总是相对于前面的同级标签为基准标签。

不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位，设置后，原来的位置始终保留着。绝对定位，设置后，原来的位置会被后面的内容占据。

第一种基本情况:没有使用position left 和 top设置属性无效.

效果图如下 符合文档流的基本顺序:

第二种情况 取消注释 position:relative

效果图如下:发现div根据设置的left和top发生了偏移 但是span 还是为什么span的位置这么奇怪呢?

因为设置 relative 并不会脱离文档流.举例例子:

设置relative你可以想象一下，这个div是个飞机，从停机坪飞起来，飞到别的地方去了。但是。。这个停机坪还是要给他留着的，否则飞不回来了

虽然div 设置了left和top的偏移,但是它原来的位置还是进行了保留.等待它飞回的那一刻.而span则保持原来的状态没有发生变化.

第三种情况:设置position : absolute

效果图如下: 这里设置absolute ,发现span 跑到文档的开始位置了.

因为设置absolute 会使div脱离文档流.两个保持这样的位置还有就是div 设置top和left的偏移.

| | |

----|------|-----|

static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。|

relative| 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。|

absolute| 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |

fixed|位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。|

另外: