码迷,mamicode.com
首页 > Web开发 > 详细

CSS定位

时间:2019-05-24 00:55:51      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:定位   relative   CSS定位   css   绝对定位   absolute   元素定位   图片   str   

position的取值主要有如下图:

技术图片

官方给出的总是不那么容易懂得,所以有了以下简洁易懂的总结:

 relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处于文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

 obsolute:定位是相对于离元素最近的设置了绝对定位或相对定位的父元素,如果没有父元素设置了绝对或相对定位,则元素相对于根元素即HTML元素定位。设置了absolute的元素脱离了普通文档流,元素在没有设置宽度的情况下,宽度由里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据该位置。

 

CSS定位

标签:定位   relative   CSS定位   css   绝对定位   absolute   元素定位   图片   str   

原文地址:https://www.cnblogs.com/kbinblog/p/10915379.html

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