有关DW绝对定位的一些看法

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值