08 绝对定位元素的位置

    技术2022-07-12  93

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a1{ width: 300px; height: 300px; background-color: pink; /* a1时a2的包含块 */ position: relative; } .a2{ width: 100px; height: 100px; background-color: rosybrown; position: absolute; /* 绝对定位: 水平布局 left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right =3 00px; 若等式不成立且没有auto,就会自动调整 可以自动调整的:left right margin width left、right和默认值是auto 垂直布局 垂直方向的等值也要满足 */ /* 垂直居中 */ margin: auto; top: 0; bottom: 0; right: 0; left: 0; } </style> </head> <body> <div class="a1"> <div class="a2"></div> </div> </body> </html>
    Processed: 0.013, SQL: 9