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>
    
  • 相关阅读:
    MySQL用户权限管理
    索引 聚集索引 唯一索引 普通索引 联合索引 覆盖索引
    sql注入
    pymysql
    MySQL 多表查询
    MySQL 聚合函数以及 优先级
    mysql 语句 字段 和结构主键外键的增删改
    协程
    事件 event
    进程池和线程池 concurrent.futures import ProcessPoolExecutor,ThreadPoolExecutor
  • 原文地址:https://www.cnblogs.com/samsara-yx/p/12394489.html
Copyright © 2011-2022 走看看