zoukankan      html  css  js  c++  java
  • position(absolute)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>position_absolute</title>
    <style>

    .div1{
    background-color: #2eb1fc;
    100px;
    height:100px;
    }
    .div2{
    background-color:#1ecc86;
    100px;
    height:100px;
    position:absolute;
    /*absolute会向上寻找他的父级(直到position的值不为None),如果找不到则会一直向上找*/
    /*此处div2出现这种情况,是因为他的父级class='box_2'的position为None,所以它的位置相对外部的html移动,所以图形才会变成这样*/
    /*解决方法:*/
    /*给父级position加上非空属性值*/
    /*if the element has 'position:absolute',the containing block is established by the nearest ancester*/
    /*with a'position' of 'absolute' ,'ralative' or 'fixed'.*/

    left:100px;
    top:100px;
    }
    .div3{
    background-color:#71a403;
    200px;
    height:200px;
    }
    .box_2{
    position:relative;
    border:3px solid rebeccapurple;
    }
    </style>
    </head>
    <body>
    <div class="div1">111</div>
    <div class="box_2">
    <div class="div2">222</div>
    </div>
    <div class="div3">333</div>
    </body>
    </html>
  • 相关阅读:
    noip模拟70
    noip模拟测试62
    noip模拟66
    noip模拟67
    noip模拟64
    QATF自动化测试框架
    自动化领域谁主沉浮
    TestComplete9.2增强支持 Embarcadero RAD Studio XE3、Ext JS
    QTP对SAP的支持
    如何将makefile构建的工程导入C++test?
  • 原文地址:https://www.cnblogs.com/startl/p/12177932.html
Copyright © 2011-2022 走看看