相对定位是标签在根据沒加position样式前的位置来定位不会受父级标签的定位的影响并且定位后不会脱离文本流,会占据原来的位置
接下來将黄色div标签设置成相对移动:
/*将三个标签设置同一属性*/可以看出黄色div标签相对于没加定位前的位置移动了100px,并且原来位置还是占据着文檔流的位置蓝色框并没有上移。
绝对定位和相对定位怎么用是标签相对于父级标签的位置来定位并默认初始位置是未设置定位前的位置如果父级标签没有设置定位,那么会一层层向上找到定位的标签直到body,上面的例子因为三个标签都是同级嘚所以会根据body标签来定位如果将黄色标签设置成绝对定位和相对定位怎么用并左移动50px:
/*将三个标签设置同一属性*/
这说明黄色标签已经脱離了文档流,相对于蓝色标签来说黄色标签不存在所以蓝色标签会上移,其实这是因为绝对定位和相对定位怎么用带浮动效果
通常我們将绝对定位和相对定位怎么用和相对定位结合使用,下面看个实例:
这是怎么做的的呢其实这就用到了相对定位和绝对定位和相对定位怎么用,下面演示:
我们在网页设计中常常会用到属性里面有5个值,分别是:、、、、
:生成绝对定位和相对定位怎么用的元素,相对于static定位以外的第一个父元素进行定位
这两个值的区别在于,一个是相对于static的父元素定位一个是相对于浏览器窗ロ定位。
不少朋友在使用absolute的时候发现它似乎也是针对浏览器窗口定位的其实是因为没有设置父元素的static值。
而fixed就完全不受任何约束了不過在IE6浏览器下是无效的,IE8以后都是可以正常使用的了