今天上课的时候讲到AP层,书里的一些实例是用这种绝对定位层来做的,我说这种层实际使用中用得不多,因为它有很多定位方面的问题,如果浏览器的分辨率变化了,网页就有可能会出问题,于是便寄扯出定位方面的一些问题。
在谈到绝对定位时,有一个非常重要的概念,这就是包含块:与绝对定位盒模型的位置和大小相关的块状盒模型。如果没有嵌套的关系,那层的定位就是以浏览器左上角为参考点的,即使分辨率变化,它的参考点也不会变,这就是AP层做网页时出现的最大的问题,所双一般情况下不用AP层,除非你有特别需要。relative
但是当层的嵌套关系的时候情况就完全不一样了,如果父一级的元素有定位属性(abusolute/relative),那么子一级的层的定位就以父一级的层的定位属性做为参考了。意思是,如果父一级的层的定位属性是ABSOLUTE,那么子层会再以父一级层的父级定位做为参考,一直到浏览器边界为止,如果这个过程中没有层的定位属性是relative,那这么子层的定位就是按屏幕来定位,但是如果父层当中任何一层的定位属性是relative,那这个子层就按拥有relative属性的层的位置来定位,这样考虑就是这么几个方式:
1.看看这个绝对定位元素的父元素——它的position属性值是relative, absolute
2.如果是,那它就是你要找的包含区块。
3.若不是,再查看该父元素的父元素,重复第一步的操作,直到你找到了该元素的包含区块,或者遍历完所有"祖先"元素。
4.如果你已经上溯到html元素,还是没有找到任何已定位的祖先元素,那么该元素的包含区块就是html元素。
所以,如果在做嵌套层的时候,我们经常为外围的层设置relative,然后将嵌套的层设置为absolute,这样,不管浏览器怎么变化,层的相对位置就不会发生变化。当你用到绝对定位的时候,最要紧的就是要弄清楚你的包含区块是哪个。所以将你的包含区块设置为position:relative非常管用,它能让你的层不会“随分辨率漂移".
有关DW绝对定位的一些看法
最新推荐文章于 2024-06-15 23:21:25 发布