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

这篇文章主要介绍了浅谈css position absolute相对于父元素的设置方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

如下html示例代码:

   
I am son1
I am son2

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

以上就是浅谈css position absolute相对于父元素的设置方式的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS 教程