介绍 CSS position 属性:
CSSposition属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left属性则决定了该元素的最终位置。
分别有五个属性: static, relative, absolute, fixed, sticky
static
这个是默认值, 也就是默认 position 不写的话就是 static 的属性值, 在文档流中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position</title>
</head>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
}
.other{
background: red;
}
.pos{
position: static;
background: blue;
}
</style>
<body>
<span class="other"></span>
<span class="pos"></span>
<span class="other"></span>
<span class="other"></span>
</body>
</html>
static 加不加都一样
relative
这个属性是相对定位, 先看例子
/* 只是改变了一些属性, 其他代码沿用上面的*/
.pos{
position: relative;
top: 10px;
left: 20px;
background: blue;
}
我们为蓝色盒子设定 relative 后, 然后再给他一个 top 和 left 属性, 他就会相对自己的位置去移动, 而且自身所占的空间不会被挤掉
absolute
absolute 属性脱离文本流, 常与 relative 结合使用, 实现一些垂直居中, 定位技巧, 三栏布局等样式
注意: absolute 根据父级元素是否有除了 position: static 属性来判断依据哪个元素定位
看例子:
.pos{
position: absolute;
top: 10px;
left: 20px;
background: blue;
}
可以出用了 absolute 的属性并指定位置的时候, 它是脱离文本流的, 而且不占空间, 因为他的父元素中只有 body, 所以是相对 body 定位的
改一下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position</title>
</head>
<style>
div{
position: relative;
}
span{
display: inline-block;
width: 100px;
height: 100px;
}
.other{
background: red;
}
.pos{
position: absolute;
top: 10px;
left: 20px;
background: blue;
}
</style>
<body>
<div>
<span class="other"></span>
<span class="pos"></span>
<span class="other"></span>
<span class="other"></span>
</div>
</body>
</html>
在外边加一个非 static 属性的元素, 就会根据父级元素定位了, 这里我加的是 relative, 因为这种配合最常用, 为什么呢 ?
下面介绍了 fixed 和 sticky 后说原因
fixed
fixed 这个属性是依据 浏览器窗口 来实现的定位, 它的常用场景就是一些浮窗广告, 或者如果文章太长的话会出现回到顶部箭头, 还有很多商城网站上做的一个侧栏等等
做个小广告的例子:
.pos{
position: fixed;
top: 60px;
left: 5px;
background: blue;
}
我加了一些文字让页面可以滚动, 可见在滚动到下面的时候 fixed 的位置不会变化, 一直在浏览器窗口的固定位置
sticky
这个属性有很多人还不知道, 但是这个属性确是一个可以实现很酷效果的属性
它有点像 relative 和 fixed 的结合体, 也就是说它不脱离文档流, 占用位置空间, 但是在页面滚动到一定位置是, 它又会和 fixed 一样去粘到浏览器窗口上, 当然它是被父元素限制的
来个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position</title>
</head>
<style>
p{
margin: 0;
padding: 0;
}
div{
height: 300px;
overflow: auto;
}
span{
display: inline-block;
width: 100px;
height: 100px;
}
.other{
background: red;
}
.pos{
position: sticky;
top: 0px;
left: 0px;
background: blue;
}
</style>
<body>
<div>
<span class="other"></span>
<span class="pos"></span>
<span class="other"></span>
<span class="other"></span>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
</div>
</body>
</html>
没有滚动过去: 占位置,看不出任何变化
滚动过去: 也占位置, 但是会粘在浏览器窗口上
根据这个属性可以做一些常见的固定导航等特别好看的样式
为什么 relative 和 absolute 属性最常搭配
很简单, fixed, absolute 会脱离文档流, skity 看起来没有脱离但是当触发一些条件的时候, 它会黏在窗口上, 而 relative 是副作用最小的一个属性, 它们可以组合实现一些常见的布局需求，同时也可以提高页面的可维护性和可读性。
想了解更多? mdn
