我在模仿页面的过程中遇到了将position属性与:before / :after 选择器联合使用的情况,觉得应该记录下来,因此写一篇文章简单捋一下position属性的三个值及其应用场景,最后分享一下仿页面时借鉴于他人的巧妙用法。
一、文档流布局的概念
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。 内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。 有三种情况将使得元素脱离文档流而存在,分别是 浮动,绝对定位, 固定定位。 但是在IE6中浮动元素也存在于文档流中。上面引用的文字中,绝对定位是指 position:absolute ,固定定位是指 position:fixed 。
二、position的属性值及其定义
以上就是关于position几个属性值的基本概念,接下来会根据这个概念详细说明一下:
2.1、position:relative 相对定位
相对定位的关键定义在于:其相对于自身在正常文档流中的原始位置定位,特点是不会脱离文档流并且原始位置不会被其他元素重新占据(除非发生层叠覆盖)。举例说明:
源码就是为test3设置css属性 :
position:relative; top:20px; left:-20px;
从这张图片的效果加上就可以看到,使用相对定位不会对它周围的元素造成影响,这一特性对于它的应用场景非常重要。
2.2、position:fixed 固定定位
固定定位,顾名思义,它是(相对于浏览器的窗口)定位之后固定不动的,特点是固定定位会脱离文档流。举例说明:
源码就是为test3设置css属性 :
position:fixed; top:20px; right:20px;
从这张图片的效果加上可以得出两个结论:
(1)test3元素的确是相对于浏览器窗口定位的;
(2)test3元素脱离了文档流,因此test4元素才会忽略test3紧贴着test2元素;
不仅如此,当滑动滚动条,使得文档内容超出可视范围,会发现test3依然固定在相对于窗口顶部20px的位置;
2.3、position:absolute 绝对定位
position:static
是所有html元素默认参数。因此这个的定义应该理解为:有html元素 E ,当它的position属性值为absolute时, 在当前DOM树中从E开始向上查找,第一个、设置position属性值不为static的、祖先元素 F 即为 E 的相对定位元素,也就是说 E 相对于F进行定位。如果它的祖先元素没有设置position属性值,默认为static,那么 E 就相对于 body 元素定位,即相对于文档进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {font-size: 15px;color: #fff;}
.test1 {width: 500px;height: 500px;background: #123;}
.test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
/* 或者修改test2 属性值 position: relative/fixed */
.test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
</style>
</head>
<body>
<div class="test1">
test1
<div class="test2">
test2
<div class="test3">test3</div>
</div>
</div>
</body>
</html>
以上基本就是position三个主要属性值的简单讲解和示例了,需要注意:absolute 和 fixed 将使得元素脱离文档流而存在,而 relative 不会,并且元素使用relative定位时对相邻的元素无影响。这使得在开发工作中,当我们需要元素E相对父级容器进行定位时倾向为父级容器设置属性 position:relative;
三、各属性常见的应用场景
3.1、position:fixed 的使用场景
#top {
box-sizing: border-box;
background:rgba(2,116,179,1);
border-bottom:3px solid #333;
position:fixed;
width:100%;
z-index:100000;
color: #fff;
}
3.2、position:relative 和 position:absolute 结合使用
四、借鉴于他人的巧妙用法
两个应用场景都是将position属性与:before / :after 选择器结合使用了。
(1)注意 :before 的背景色设置及 :after 的背景图设置;
(2):after设置content属性值 及 :hover:after 的 鼠标悬浮时的渲染效果;
五、参考博客
我在写这篇博客的时候参考了他人的文档,甚至相当一部分的效果图片都是截取自这个里面的,因此附上我参考的四篇文章,有需要的朋友可以了解一下:
(1)http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html
(2)http://blog.csdn.net/fungleo/article/details/50056111
(3)http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
(4)http://www.css88.com/book/css/properties/positioning/position.htm