盒子定位

一、定位有哪几种

float浮动定位
position:absolute;静态定位
position:absolute;绝对定位
position:relative;相对定位
position:fixed;固定定位
position: static; 静态定位

二、四种定位的特性
flaot定位 相对于父元素容器, 后面紧邻的则会受到浮动的影响, 这种定位使得元素脱离文档流
static(静态定位) 照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,对left、top、z-index等设置值无效,这种定位不脱离文档流。
position:relative; 可以通过设置left、top等值,使得指定元素相对其正常的位置进行偏移,这种定位不脱离文档流;
position:absolute;这种定位通常设置父元素为relative定位来配合使用),在没有父元素的条件下,它的参照为body,该方式脱离文档流;
fixed(固定定位)相对于整个文档的,只需设置它相对于各个方向的偏移值,就可以将该元素固定在页面固定的位置,脱离文档流;

三、详细解释相对定位

对某元素设置了相对定位,那么首先这个元素他会跟其它的元素一样,出现在文档流中它该出现的位置,然后,我们可以设置它的水平或垂直偏移量,让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意, 在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。这里值得注意的一点是:偏移可不是边距,跟边距是不一样的。

四、详细解释绝对定位

被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除,那这个元素到哪去了呢?它浮了起来,其实设置了相对定位relative时也会让该 元素浮起来,但它们的不同点在于,我们可以通过z-index来设置它们的堆叠顺序

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 一、定位 解决页面上盒子与盒子之间的层叠问题 1、元素的定位属性 边偏移:通过边偏移属性top、bottom、le...
    旧游旧游阅读 4,542评论 3 0
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 4,758评论 0 3
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 11,084评论 0 15
  • 初中时的我们年少单纯,所关心的不过是学习、玩耍。那时我学习好,可以帮他写作业,他人缘好哥们一群,经常带着我一起玩。...
    陌上花开请缓缓归矣阅读 3,335评论 0 0