CSS - 相对定位

  • 作者：KK

  • 发表日期：2016.1.27

相对定位也能让元素脱离文档流,不过一般脱得并不是太明显而已,先试下:

<body>
<style type="text/css">
div{width:200px; height:200px; background:yellow; margin:100px auto 0;}
#link2{position:relative; top:-13px;} /*重点是给#link2上了这个样式*/
</style>
<div>
	<a href="#" id="link1">链接1</a>
	<a href="#" id="link2">链接2</a>
</div>
</body>

以上代码,如果没有#link2的样式,那么链接2将会乖乖地跟在链接1的右边,但由于添加了样式就使得它不那么乖了,下面我解说一下这个样式

这就是相对定位的效果,相对定位要将position的值设置为relative,含义是相对于父容器进行定位

两个a标签的父容器都是div,设置relative时,元素的位置默认不会动,但如果进一步设置top|left|right|bottom属性的话,就会基于当前位置进行偏移

相以上面利用top:-13px;让链接2向上后退了13个像素

对absolute的影响

之前说absolute是绝对定位,所设定的left和top就是浏览器窗口的left和top,其实那是不对的,看看下面例子先:

<body>
	<div style="width:400px; height:400px; border:1px solid #000; margin-left:100px; margin-top:100px; position:relative;">
		<a href="#">链接1</a>
		<a href="#" style="position:absolute; left:22px; top:33px;">链接2</a>
	</div>
	<a href="#" style="position:absolute; left:20px; top:20px;">链接3</a>
</body>

请注意链接2和链接3,它们的style是一样的(绝对定位,同样的属性值),但是为什么却漂在不同的位置呢?

原因是因为链接2被一个带有相对定位(position:relative)的容器包住了,其实绝对定位是相对于包住它的相对定位容器进行绝对定位的,如果div没有相对定位的话它就会相对于body来进行绝对定位

最终结论就是:

  • 链接2基对于div进行绝对定位,从div的左上角开始偏移到距离div左边框22像素的位置,距离div顶边框33像素的位置

  • 链接3基于body进行绝对定位,从body的左上角开始偏移到距离body左边框22像素的位置,距离body顶边框33像素的位置