迷惑的position

小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~

static

元素未定位，默认出现在普通流中，即元素从左到右，从上到下的方式布局～

HTML

Static - 普通流    header box    left box    right box    bottom box

CSS

.section {
margin-bottom: 100px;
}
.section__boxes {
font-size: 22px;
}
.header-box {
background-color: # 0981B2;
height: 100px;
}
.left-box {
background-color: # FF002D;
height: 200px;
}
.right-box {
background-color: # FFF419;
height: 200px;
}
.bottom-box {
background-color: # B037B2;
height: 100px;
}

效果图

relative

相对于该元素所在普通流的位置进行定位，现在我门让left box相对于其位置向右边移动100像素。

CSS

.section--relative > .left-box {
position: relative;
left: 100px;
}

效果图

对比static和relative两个效果图，你可以看到left box确实是相对于其所在正常流位置进行定位，向右移动了100像素。

absolute

相对于static定位以外的第一个父元素进行定位，即相对于第一个非处于正常流的父元素定位，现在我们将left box设置为absolute，并且向下移动1150像素。

CSS

.section--absolute > .left-box {
position: absolute;
top: 1150px;
}

效果图

由于查找left box的祖先元素中，未发现有设置非static的元素，其绝对定位是相对于根元素进行移动的。

relative和absolute对比

CSS

我们设置其父亲元素为relative，然后让其元素向下、右各移动100像素。

.section--absolute {
position: relative;
}
.section--absolute > .left-box {
position: absolute;
top: 100px;
left: 100px;
}

效果图

由于其父元素设置了relative，此时该元素是相对于其父亲进行定位的，而非根元素了～

我们再对比下relative和此时的效果图，你会发现left box的实现效果一致，但是right box却有一点不一样。这是因为当元素设置relative时，其元素依然会占据所在普通流的的位置，而absolute会脱离普通文档流，此时right box就往左边布局了。

fixed

不管浏览器内容怎么滚动等操作，都是相对于浏览器窗口进行定位，即固定位置。我门将元素固定在浏览器的顶部。

HTML

  fixed - 固定位置 - 相对浏览器窗口定位

CSS

.section-fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: # 15FF44;
}
.section-fixed > p {
margin: 0;
}

效果图

你可以看到随着浏览器滚动，其元素的位置依然在浏览器窗口的顶部，未发生任何变化。

关键知识点

value
description

static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

inherit
规定应该从父元素继承 position 属性的值。

w3school

资源

在线测试

源代码

关键字：css, html, bootstrap, position

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！