zoukankan      html  css  js  c++  java
  • css 定位

    对于(例如元素div1)position:absolute时,是相对于已定位的最近父元素,如果没有已定位的父元素,则相对于初始包含块(html)

    其中这里说的"已定位的父元素"是指position属性为relative,absolute,fixed的元素,如果position的值为static或不存在,则div1则absolute则不相对于该父元素,而是相对于初始包含块。

    在一个一个框包含另一个框中,

    eg:

    <div class="one">

    <div class="two"></div>

    </div> 

    div.two相对于div.one进行定位,

    如果div.two为absolute定位,则不考虑div.one的padding效果。但是会考虑div.two自身的margin效果。

    如果div.two为relative定位,是相对与自身进行定位,要考虑div.one的padding效果。 

    eg:例如

    <style>


    .one
    {
    position:relative;
    margin:auto;
    400px;
    height:400px;
    border:2px solid blue;
    box-sizing:border-box;
    }
    .two
    {
    margin:20px;
    top:0px;
    left:0px;
    position:absolute;
    200px;
    height:200px;
    border:2px solid red;
    }
    </style>

     当.two(position:absolute)中的top:0px left:0px 时既使div.one有padding值,但是div.two还是贴着div.one的左上角。但是div.two有margin值时,要考虑margin的效果,div.two的左上角不在贴着div.one的左上角。

  • 相关阅读:
    产品易用性
    优化Compress components with gzip 问题
    转:稳定性测试
    Xray CA证书
    转:获取WEB各阶段响应时间
    测试用例编写注意事项
    用dd把一个空硬盘写满
    转:linux终端命令使用cpu负载到100
    JMeter命令行执行+生成HTML报告
    防F12扒代码:按下F12关闭当前页面
  • 原文地址:https://www.cnblogs.com/feng12345/p/5440981.html
Copyright © 2011-2022 走看看