zoukankan      html  css  js  c++  java
  • css之绝对定位

    通常我们认为CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position:relative。前面一句是没有问题的,在没有父元素设置定位的话,默认就是以body来定位的,但是后面一句,要想相对父元素定位,父元素必须设置相对定位(relative),实际测试这句有些问题

    正确的理解是:

    1.相对定位:相对于块级元素(或行内块)自身位置进行定位;
    2.绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);给父元素设置position:relative/absolute/fixed均可,若想避免子元素溢出父元素,结合overflow:hidden使用

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .wrap{
                 500px;
                height: 500px;
                margin: 50px auto;
                background: #cccccc;
                position: relative;
            }
            .content{
                 100px;
                height: 100px;
                background: red;
                position: absolute;
                top:10px;
                left:10px;
            }
            .son{
                 50px;
                height: 50px;
                background: blue;
                position: absolute;
                top: 10px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="content">
                <div class="son"></div>
            </div>
        </div>
    </body>
    </html>
    
  • 相关阅读:
    Interesting Finds: 2009 01.15 ~ 01.17
    Interesting Finds: 2008.12.07
    Interesting Finds: 2008.12.31
    10月16号
    10月14号
    10月15号
    10月13号
    10月20号
    10月19号
    10月12号
  • 原文地址:https://www.cnblogs.com/samsara-yx/p/12394489.html
Copyright © 2011-2022 走看看