[html5入门-16]position的几种定位区别

Html5中position的定位主要分为绝对定位，相对定位，静态定位，固定定位，继承父级定位，语法分别为position：absolute|relative|static|fixed|inhret，定位之后可以设置top，bottom，left，right四个属性值，其中优先级优先级：top>bottom,left>right，另外还有一个属性z-index:number；设置元素的堆叠顺序，数值越大，越在上面显示。

一．绝对定位

它是相对不是static最近一级父元素来进行定位的，被定位元素会脱离文档流，然后我们可以通过left,right,top,bottom来调整元素的位置

特点：

1.完全脱离文档流，

2.提升层级等级，

3.针对父级定位，如果父级没有定位，那就找父级上一级定位，如果父级上一级没有定位，最终以docment进行定位，

4.绝对定位一般配合相对定位使用，相对定位是父级，绝对定位是子级，

5.支持所有CSS样式，

6.提升定位元素层级的命令 z-index数字越大，越向上显示，

7.如果绝对定位的子集有浮动，可以不做清除浮动操作。

举例说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background: aqua;
				position: relative;
				left: 50px;
				top: 50px;
			}
			.div11{
				width:50px;
				height:50px;
				background:red;
				position:absolute;
				left:50px;
				top:50px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div11"></div>
		</div>
	</body>
</html>

给父级div1设置了相对定位，子级div11就相对父级进行定位。

另外：

1.如果元素没有固定的width和height，却同时有top,left,right,bottom，那么该元素将占据除四条边距之外的所有空间；

2.如果元素没有固定的height和width，却同时有top.bottom，那么元素将横跨top和bottom之外剩余的所有高度；3.如果元素没有固定的width和height，却同时有left,right那么元素将横跨left和right之外剩余的所有宽度；

4.如果只设置了top，那么元素只会做垂直方向的移动，水平方向依然靠着父级的最左边。

二．相对定位

也就是相对于自己在文档流中的位置进行定位。

特点：

1.不脱离文档流，原有空间位置被保留，

2.针对自己本身位置进行定位，

3.不影响元素本身属性的设置

注意：

1.如果一个定位元素，同时设置了top和bottom，top的优先级更高，会显示top的值，

2.如果同时设置Left和right的值，优先级取决于网页语言，在英语网页中left的优先级更高，会显示left的值，在阿拉伯语言网页中right的优先级更高，

3.如果一个元素设置了相对定位（甚至是做了偏移），其他元素排版时参考的依然是那个原有位置（没有设置偏移前的位置），

4.如果一个元素设置了相对定位，它的原有位置空间被保留。即使该元素做偏移，其他元素也不会占据它原有的（偏移前）的位置。

举例说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img与background</title>
		<style type="text/css">
			.img1{
				width: 300px;
				height: 150px;
				border: 1px solid black;

			}
			.pone{
				position: relative;
				left: 10px;
				top: -170px;
			}
		</style>
	</head>
	<body>
		<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
		<p class="pone">CSDN是全球最大的中文社区</p>
		<p class="ptwo">CSDN是全球最大的中文社区</p>
	</body>
</html>

可见当pone通过相对定位转移到相对位置，后面的ptwo无法填充起留下位置，在实际中并不实用。

三．固定定位

是相对浏览器窗口（docment）进行定位的，同样也是脱离文档流，可以通过left，top，right，bottom来调整元素所在的位置。

特点：

1.一般用来做页面的导航部分与底部，

2.可以用来网页中插入广告和商业推广。

注意：在使用时候，尽量使用在页面的底部，因为即使脱离文档流也不会影响布局

四，几种定位简单比较总结

1.position：relative;不会脱离文档流

2.position：absolute|fixed；脱离文档流

3.absolute是相对于父级非static进行定位

4.fixed始终是相对于浏览器窗口进行定位

定位的用途：

1.图片的叠加

2，元素的垂直居中

3.布局位置的改变

4，广告植入

秒客网

[html5入门-16]position的几种定位区别

相关文章