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>
    
  • 相关阅读:
    Python Revisited Day 13 (正则表达式)
    Python Revisited Day 06 (面向对象程序设计)
    Python Revisited (变量)
    Python Revisited Day 05(模块)
    Python Revisited Day 04 (控制结构与函数)
    Python Revisited Day 03 (组合数据类型)
    Numpy
    Python Revisited Day 01
    Python3使用openpyxl读写Excel文件
    Python3操作YAML文件
  • 原文地址:https://www.cnblogs.com/samsara-yx/p/12394489.html
Copyright © 2011-2022 走看看