浅谈css position absolute相对于父元素的设置方式
发布时间:2019-10-10 15:01:02 作者:手指乐 我要评论
这篇文章主要介绍了浅谈css position absolute相对于父元素的设置方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。
有时候我们需要在父元素的容器内设置相对的绝对位置
要做到这一点需要把父元素的position属性设置为relative,设置为relative之后不设置left和top属性,这时候父元素虽然是relative的,但是还是在原来位置。 然后把子元素的位置position设置为absolute的,并设置其left,top,right,bottom属性,这样就是相对于父元素的绝对位置了。
如下html示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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时其百分值的计算
这篇文章主要介绍了css position属性为absolute时其百分值的计算,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小2019-08-06- 下面小编就为大家带来一篇CSS position:absolute全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-20
- positon有4个属性:static relative absolute fixed,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又2014-11-28
css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义:static:无特殊定位,对象遵循正常文档流;relative:对象遵循正常文档流;absolute:对象脱离正常文档流fixed:对象脱离正常文档流,有兴趣的朋友2013-04-08CSS position属性absolute relative等五个值的解释
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的2012-12-15
最新评论