关于position:relative absolute fixed定位和布局的踩坑心得

position属性介绍

absolute

顾名思义,这是绝对定位的意思,我们在使用时通常都是给元素声明了position:absolute属性,然后再用top,left,right,bottom属性去改变元素的位置,语法示例如下:

position:absolute;
top:10px;

该语句设置了定位方式为absolute,并且向下偏移了10px

relative

relative是相对定位的意思,用来给父元素添加参考点,语法实例如下:

position:relative;

踩坑心得

我原先的错误想法是,absolute只能相对于浏览器进行定位,relative只能相对于自己本身的位置进行定位

然而实际情况是,relative 是给自己的子元素设置了一个参考点,子元素使用absolute进行定位的时候,会一层一层地向上去找自己的父元素中有没有设置position:relative属性的父元素,如果找到了,那么所有的偏移量例如top:10px这种都是相对于父元素的位置来进行偏移,如果自己的所有父元素都没有设置position:relative,那么absolute定位的时候会相对于根元素也就是body元素来进行偏移

说的有些复杂,我们来看几个例子:

<html>
	<head>
		<style>
			.grandFather
			{
				width:700px;
				height:500px;
				background-color:blue;
				margin:200px auto;
			}
			.father
			{
				width:200px;
				height:100px;
				background-color:red;
			}
			.son
			{
				width:50px;
				height:50px;
				background-color:green;
			}
		</style>
	</head>
	
	<body>
		<div class="grandFather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>

如图,我们声明了3个嵌套的div,按父元素到子元素的顺序分别取名为爷爷、爸爸、儿子,尺寸分别为700x500,200x100,50x50,设置了三个颜色之后,并且我们为了实验的效果,用margin属性将div的位置调到了浏览器的居中位置,效果如下:

在这里插入图片描述

现在,我们给儿子设置一个position:absolute;再让他top:30px来进行向下30px的偏移

top:30px;

在这里插入图片描述

我们发现,儿子并没有相对于爸爸或者爷爷向下偏移30px,而是相对于浏览器的根元素body向下偏移了30px,但是如果我们此时设置了爸爸具有position:relative属性

.father
{
	width:200px;
	height:100px;
	background-color:red;
	position:relative;
}

在这里插入图片描述

可见,儿子向上找到了relative的爸爸,然后相对于爸爸的位置向下偏移了30px

如果我们把爸爸的relative去掉,设置爷爷为relative

.grandFather
{
	width:700px;
	height:500px;
	background-color:blue;
	margin:200px auto;
	position:relative;
}

在这里插入图片描述

可以发现,儿子仍然来到了刚才的位置,由此可见,儿子向上找,发现爸爸不是relative,再向上找,发现爷爷是relative,从而以爷爷的位置作为参考进行了偏移,只不过由于我们的爸爸和爷爷的起始位置一样,才造成了相同的效果

总结与心得

position的relative和absolute属性要搭配来用,但是当我们布局的时候,尽量不要用position属性来进行定位,用position确实爽,能霸道地直接把元素移动到浏览器显示区域的任何位置,但是这破坏了网页设计的布局嵌套,而且你会发现,用position霸道的改动位置设计出的布局,在浏览器放大缩小的时候,元素就全都乱套了,发生很多错位现象。我们在网页的布局时了,最基本的margin,float一些属性已经可以应付90%的布局情况了,能不用position就不用position,当我们想要耍无赖的时候,比如在页面滚动的时候,始终在浏览器的固定位置显示一个广告窗口(用position:fixed来实现),或者在点击元素跳出弹窗遮盖其他页面元素只允许在弹窗上操作时(用positionLabsolute实现),才会用到position属性,否则,滥用position只会造成页面结构的混乱

展开阅读全文

没有更多推荐了,返回首页