浅谈css position absolute相对于父元素的设置方式

大家知道 css的pos IT ion absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。

有时候我们需要在父元素的容器内设置相对的绝对位置

要做到这一点需要把父元素的position属性设置为relative，设置为relative之后不设置left和top属性，这时候父元素虽然是relative的，但是还是在原来位置。然后把子元素的位置position设置为absolute的，并设置其left，top，right，bottom属性，这样就是相对于父元素的绝对位置了。

如下ht ML 示例代码：

<!docty PE  html>
<html>
    <style type="text/css">
     # father {
       position: relative;
       width:600px;
       m arg in:auto;
       h ei ght:400px;
       border:1px solid  red ;
    }

    #so n1  {
       position: absolute;
       top: 0;
       background:#f0f0f0;
    }

    #son2 {
       position: absolute;
       bottom: 0;
       background:blue;
    }
    </style>
    <body>
    <div id="father">
        <div id="son1">I  am  son1</div>
        <div id="son2">I am son2</div>
    </div>
    </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的浅谈css position absolute相对于父元素的设置方式全部内容，希望文章能够帮你解决浅谈css position absolute相对于父元素的设置方式所遇到的问题。

如果觉得网站内容还不错，推荐好友。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200908

更新时间：2023-04-27 阅读：30次