码迷,mamicode.com
首页 > 其他好文 > 详细

relative absolute fixed三种定位差别

时间:2018-06-24 23:52:07      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:https   聊天   err   for   类型   定义   影响   定位元素   位置   

relative

生成相对定位的元素,相对于其正常位置进行定位。

元素的位置通过left、right、top、button属性进行规定,

可以通过z-index进行层次分级。

元素元素仍保持其未定位前的形状,原本所占的空间仍将保留。

如果没有定位偏移量,对元素本身没有任何影响

absolute

生成绝对定位元素。使元素脱离文档流,并相对于其包含块进行定位,包含块可能是文档中的另一个元素或者是初始包含块,

元素原先在正常文档流中所占的空间会会被后面元素占据;

元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框;

绝对定位元素的包含块由离它最近的 ‘position‘ 属性为 ‘absolute‘、‘relative‘ 或者 ‘fixed‘ 的祖先元素创建。只要父级元素设置了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。如果都没有定义,那么就相对于整个文档body定位(注意不是相对于浏览器窗口定位)

相对定位一般都是配合绝对定位元素使用

fixed:生成绝对定位元素,相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed

作者:平淡的茶叶壶
链接:https://www.zhihu.com/question/53545802/answer/135467197
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

relative absolute fixed三种定位差别

标签:https   聊天   err   for   类型   定义   影响   定位元素   位置   

原文地址:https://www.cnblogs.com/zs-xanadu/p/9222001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!