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

版权声明:在那最初的相遇中,我们都曾经为彼此心动过... https://blog.csdn.net/weixin_36185028/article/details/52741803

Html5position的定位主要分为绝对定位,相对定位,静态定位,固定定位,继承父级定位,语法分别为positionabsolute|relative|static|fixed|inhret,定位之后可以设置topbottomleftright四个属性值,其中优先级优先级: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.如果元素没有固定的widthheight,却同时有top,left,right,bottom,那么该元素将占据除四条边距之外的所有空间;

2.如果元素没有固定的heightwidth,却同时有top.bottom,那么元素将横跨topbottom之外剩余的所有高度;3.如果元素没有固定的widthheight,却同时有left,right那么元素将横跨leftright之外剩余的所有宽度;

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

二.相对定位

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

特点:

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

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

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

注意:

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

2.如果同时设置Leftright的值,优先级取决于网页语言,在英语网页中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)进行定位的,同样也是脱离文档流,可以通过lefttoprightbottom来调整元素所在的位置。

特点:

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

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

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

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

1.positionrelative;不会脱离文档流

2.positionabsolute|fixed;脱离文档流

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

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

定位的用途:

1.图片的叠加

2,元素的垂直居中

3.布局位置的改变

4,广告植入




阅读更多
换一批

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