标签:静态 ott logs 修改 png back body 窗体 word
参考源:http://blog.csdn.net/chen_zw/article/details/8741365
我们先来看看CSS3 Api中对position属性的相关定义:
什么是文档流?
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流,分别是:浮动、绝对定位和相对定位。
静态定位(static) :
static,无特殊定位,它是html元素默认的定位方式,即我们不设定元素的position属性时默认的position值就是static,它遵循正常的文档流对象,对象占用文档空间,该定位方式下,top、right、bottom、left、z-index等属性是无效的。
相对定位(relative) :
relative定位,又称为相对定位,从字面上来解析,我们就可以看出该属性的主要特性:相对。但是它相对的又是相对于什么地方而言的呢?这个是个重点,也是最让我迷糊的一个地方,现在让我们来做个测试,我想大家都会明白的:
(1) 初始没有定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #first{width:200px;height:100px;border:1px solid red;} #second{width:200px;height:100px;border:1px solid blue;} </style> </head> <body> <div id="first">first</div> <div id="second">second</div> </body> </html>
初始原图:
(2) 我们修改first元素的position属性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #first{width:200px;height:100px;border:1px solid red; position:relative;top:20px;left:20px;} #second{width:200px;height:100px;border:1px solid blue;} </style> </head> <body> <div id="first">first</div> <div id="second">second</div> </body> </html>
相对偏移20px后,结果如下,虚线是初始的位置:
CSS中position属性( absolute | relative | static | fixed )详解
标签:静态 ott logs 修改 png back body 窗体 word
原文地址:http://www.cnblogs.com/momo8238/p/7427861.html