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

    处理多出来的div2--去掉div2父标签的边框

    <!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; 去掉行代码出来的一点点就会在div3中了*/
    }
    </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>
  • 相关阅读:
    架构设计的UML图形思考
    SymmetricDS文档翻译--【Chapter 3. 具体配置(Configuration)[section C]】
    LeetCodeOJ. String to Integer (atoi)
    jquery05 继承
    jquery 04
    jquery constructor(null)
    jquery js解析函数、函数直接调用
    jquery init 关系
    jquery constructor
    jQuery03
  • 原文地址:https://www.cnblogs.com/startl/p/12177943.html
Copyright © 2011-2022 走看看