定位相关属性（positon：relative absolution; z-index;right、left、bottom、top）

最新推荐文章于 2022-08-15 16:48:19 发布

wbs925zxh

最新推荐文章于 2022-08-15 16:48:19 发布

阅读量905

点赞数

本文链接：https://blog.csdn.net/wbs925zxh/article/details/85321336

版权

一、positon:用于设置目标对象的定位当时。
1、如将此属性设置为absolute，完全不受页面其他元素的影响，直接基于页面定位

<!DOCTYPE html>
<html>

	<body>
		<div style="width:100px;height:100px;border:1px solid #111;position:absolute;left:20px;top:20px;">
		</div>
	</body>
<html>

在这里插入图片描述
代码中加入两个换行符br/，div位置依旧不变

<!DOCTYPE html>
<html>

	<body>
		aa<br/>aa<br/>
		<div style="width:100px;height:100px;border:1px solid #111;position:absolute;left:50px;top:50px;">
		</div>
	</body>
<html>

在这里插入图片描述

2、如将此属性设置为relative，受其他元素影响，会基于页面中的文本元素定位

<!DOCTYPE html>
<html>

	<body>
		<div style="width:100px;height:100px;border:1px solid #111;position:relative;left:50px;top:50px;">
		</div>
	</body>
<html>

在这里插入图片描述
代码中加入两个换行符br/，div位置会根据HTML流结束的位置定位

<!DOCTYPE html>
<html>

	<body>
		aa<br/>aa<br/>
		<div style="position:relative;width:100px;height:100px;border:1px solid #111;left:50px;top:50px;">
		</div>
	</body>
<html>

在这里插入图片描述
3、如将此属性设置为static，页面的left、top等相关定位属性失效；

<!DOCTYPE html>
<html>

	<body>
		<div style="position:static;width:100px;height:100px;border:1px solid #111;left:50px;top:50px;">
		</div>
	</body>
<html>

定位失效
在这里插入图片描述
二、z-index
用于设置目标对象的漂浮层的层序，该值越大，漂浮层越浮于上面。此属性仅当position属性值为relative或absolute时有效。
用position-absoluted设置两个相同位置的div z-index设置不同，背景颜色设置不同
background-color：blue；z-index：3；
background-color：yellow；z-index：4；

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<div style="position:absolute;z-index:3;left:20px;top:20px;width:40px;height:42px;background-color:blue;">
		</div>
		<div style="position:absolute;z-index:4;left:20px;top:20px;width:40px;height:42px;background-color:yellow;">
		</div>
	</body>
</html>

在这里插入图片描述
background-color：blue；z-index：3；
background-color：yellow；z-index：2;

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<div style="position:absolute;z-index:3;left:20px;top:20px;width:40px;height:42px;background-color:blue;">
		</div>
		<div style="position:absolute;z-index:2;left:20px;top:20px;width:40px;height:42px;background-color:yellow;">
		</div>
	</body>
</html>

在这里插入图片描述
三、absolute和relative配合使用
定义一个div套在另一个div中。外面div(position:realtive),里面div(position:absolute)

四、right、left、bottom、top
如果想把div位置定位到右下角，用决定定位设置right和bottom更简单

wbs925zxh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位相关属性（positon：relative absolution; z-index;right、left、bottom、top）

一、positon:用于设置目标对象的定位当时。1、如将此属性设置为absolute，完全不受页面其他元素的影响，直接基于页面定位&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div style=&quot;width:100px;height:100px;border:1px solid #111;position:a
复制链接

扫一扫