[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
第2:相对定位(relative) 相对定位是依据设置定位属性的4个方向上的任意值来实现相对与其本来在文档中正常显示的位置的偏移;
当相对定位的元素偏移出其本来的文档流的位置:其他元素仍然认为那个位置为其的逻辑文档流区域.而不会去补上去,虽然我们感官上认为那里是没有东西的~
例子:
运行代码框
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
其中第2个色块就是相对于其本来的文档流中的位置依据left:10px;top:20px;的定位属性值进行偏移.
其后面的第3个色块依然认为前面的空白(就是第3的原本的文档流的位置)为第3个色块的文档流区域 则不会自动填充上去.
当相对定位的父元素出现滚动条时,IE浏览器的特殊情况 例子:
运行代码框
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
当相对定位的父元素有滚动条的时候,该相对定位元素再IE的表现很诡异(其后面的元素依然认为那个位置为该元素的默认位置,而表现出相对定位的特性,但是拉动滚动条时,在FF下正常即相对定位的元素和文档一起滚动,但是在IE系列里面,相对定位的色块依然在原地不动,此时元素的特性有点像绝对定位)
当相对定位同时拥有定位属性的4个方向的值和margin属性。相对定位的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果,而按照方向执行叠加后的数值的偏移
例子:
运行代码框
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
7.当绝对定位同时拥有定位属性和margin属性、绝对定位的的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果,而按照方向执行叠加后的数值的偏移
例子:
运行代码框
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
我们会发现这个红色的色块距离左边200PX.left margin-left
小结:
当元素同时拥有浮动和绝对定位时.绝对定位的优先权大于浮动.因为浮动受文档的逻辑结构位置限制。而绝对定位不会。
所以当绝对定位脱离文档流,绝对定位的元素不受浮动影响.即float:left会失效,
数学上我们知道.X轴上一个数值 Y轴上的一个数值即可确定一个点,感官上left right属于x轴bottom top属于Y轴。
我们完全可以设置一个无宽度和高度绝对定位的元素同时拥有top right bottom left来实现其根据其参考的定位基点的父元素的的大小来自适应大小.
但是IE6不支持.IE6只能识别left的值而忽视right.所以下面例子请在非IE6以及一下浏览器浏览
例子:
运行代码框