zoukankan      html  css  js  c++  java
  • Css之Relative

    CSS 中position:absolute的定位到底是相当于body,还是父级元素的问题

    position:absolute的定位是一个相对麻烦的问题。

    首先在文档流中,定义为position:absolute的元素已经被删除了。

    那它的定位到底是相对于body,还是父级元素呢?

    结论如下:

    position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素,如果都没有,就是相对于body。

    举例如下:

    1、它的父级元素都没有,就是相对于body定位的。

    <!DOCTYPE html>
    
    <html>
    <head>
        <title>test</title>
    </head>
    
    <body>
        <div style="200px;height:200px;background-color:red;">
            <div style="100px;height:100px;background-color:blue;">
                <div style="50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
            </div>
        </div>
    </body>
    </html>

    2、它的父级元素里有,就是相对于哪个有的父级元素。

    例一:相对于第一个div定位

    <!DOCTYPE html>
    
    <html>
    <head>
        <title>test</title>
    </head>
    
    <body>
        <div style="200px;height:200px;background-color:red;position:absolute;">
            <div style="100px;height:100px;background-color:blue;">
                <div style="50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
            </div>
        </div>
    </body>
    </html>

    例二:相对于第二个div定位

    <!DOCTYPE html>
    
    <html>
    <head>
        <title>test</title>
    </head>
    
    <body>
        <div style="200px;height:200px;background-color:red;position:absolute;">
            <div style="100px;height:100px;background-color:blue;position:relative;">
                <div style="50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    Python--学习过程
    线程、进程、协程
    socket
    面向对象--进阶
    面向对象--初级
    Python常用的模块
    2019-2020-1 20191301《信息安全专业导论》第十二周学习总结
    wirehark
    2019--2020第十一周信息安全导论论总结20191301
    2019--2020信息安全导论第10周总结20191301
  • 原文地址:https://www.cnblogs.com/zyxiaohuihui/p/9119168.html
Copyright © 2011-2022 走看看