zoukankan      html  css  js  c++  java
  • 深入理解Div的position的含义

    默认的属性值都是static,静态,最关键的是
    relative(相对)以及absolute(绝对)。
    往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。

    也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
    例如如下A-B的嵌套结构
     

    <div id="A">
     <div id="B">
     </div>
    </div>

    当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。

    但是如果你在A中的padding="50px"
    在A中的其他没有设置postion为absolute的会随着A的padding的值而变化
    但是B不会变的它的position是相对上一级的


  • 相关阅读:
    topcoder srm 320 div1
    topcoder srm 325 div1
    topcoder srm 330 div1
    topcoder srm 335 div1
    topcoder srm 340 div1
    topcoder srm 300 div1
    topcoder srm 305 div1
    topcoder srm 310 div1
    topcoder srm 315 div1
    如何统计iOS产品不同渠道的下载量?
  • 原文地址:https://www.cnblogs.com/clc2008/p/1195848.html
Copyright © 2011-2022 走看看