css中怎么使用position absolute属性设置相对于父元素

2023-06-08 05:06:49 374人浏览独家记忆

摘要

本篇文章为大家展示了CSS中怎么使用position absolute属性设置相对于父元素，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。有时候我们需要在父元素的容器内设置相对的绝对位置要做到这一点需

本篇文章为大家展示了CSS中怎么使用position absolute属性设置相对于父元素，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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

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

如下html示例代码：

<!doctype html><html>    <style type="text/css">    #father {       position: relative;       width:600px;       margin:auto;       height:400px;       border:1px solid red;    }    #son1 {       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属性设置相对于父元素，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css中怎么使用position absolute属性设置相对于父元素

本文链接: https://www.lsjlt.com/news/252079.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341