欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用Position的方式来进行定位

程序员文章站 2022-04-25 11:38:15
...

一,position的常用值

描述
static 自动定位
relative 相对于自己原来的位置来定位(自恋型)
absolute 相对于父亲的位置来定位(拼爹型)
fixed 相对于浏览器的固定位置(认死理型)

二,position之static定位

概述:static方式是position的默认定位模式。在该模式下无法使用top、left、right、bottom来进行移动元素。

该定位的唯一作用就是:取消定位

三,position之relative定位(自恋型)

概述:relative方式,会以元素原来的位置为基准,然后在这个基准下,通过top、left、bottom、right进行定位。并且它依然会占据原来位置的空间。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试position的relative定位</title>
	<style type="text/css">
		.one{
			position:relative; 
			top:100px;
			left:100px;
			width:200px;
			height:200px;
			background-color:#FF8888;
		}
		.two{
			width:200px;
			height:200px; 
			background-color: #FFFF00;
		}
		.three{
			width:200px;
			height:200px; 
			background-color: #00DDAA;
		}
	</style>
</head>
<body>
	<!--relative方式,会以元素原来的位置为基准,然后在这个基准下,
	通过top、left、bottom、right进行定位。并且它依然会占据原来位置的空间	-->
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

四,position之absolute定位(拼爹型)

概述:
①当父层没有使用position来定位的时候,那么子层就会以整个网页作为基准,
通过top、left、bottom、right进行定位。完全不会再占据空间
②当元素的祖先层时使用position定位的时候,那么子元素会根据祖先层的位置
来进行定位,通过top、left、bottom、right来进行定位。完全不会再占据空间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试position的absolute定位之父层没有position</title>
	<style>
        .father {
            width: 300px;
            height: 300px;
            background-color: #E93EFF ;
            margin: 0 auto;
        }
 
        .son1 {
            width: 200px;
            height: 100px;
            background-color: #668800
;
            position: absolute;
            top: 200px;
            left: 50px;   
        }
        .son2 {
            width: 200px;
            height: 100px;
            background-color: #660077;
            position: absolute;
            top: 220px;
            left: 60px;   
        }
    </style> 
</head>
<body>
	<!--当父层没有使用position来定位的时候,那么子层就会以整个网页作为基准,
		通过top、left、bottom、right进行定位。完全不会再占据空间-->
	<div class="father">
	    <div class="son1"> 
	    </div>
	    <div class="son2"> 
	    </div>
	</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试position的absolute定位之父层有position</title>
	<style>
 
        .father {
 
            width: 300px;
            height: 300px;
            background-color: #0000AA;
            margin: 0 auto;
            position: relative;
 
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: #FFFF77;
            position: absolute; 
 			top:200px;
 			left:100px;

        }
    </style>

</head>
<body>
	<!--当元素的祖先层时使用position定位的时候,那么子元素会根据祖先层的位置来进行定位,
		通过top、left、bottom、right来进行定位-->
	<div class="father">
    	<div class="son"></div>
	</div>

</body>
</html>

五,position之fixed定位(认死理型)

概述:使用position的fixed定位,它会固定在某一个位置,不会随滚动条的滚动而改变位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试position的fixed定位</title>
	<style>
        .ad {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 100px;
        }
    </style>

</head>
<body>
	<!--使用position的fixed定位,它会固定在某一个位置,不会随滚动条的滚动而改变位置-->
	<div class="ad">
    	这是一块不管你怎么滚动都会在同一位置的内容
	</div>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>
	<p>定位测试</p>

</body>
</html>

六,控制叠放次序(z-index)

概述:对多个元素同时设置定位时,定位元素之间可能会发生重叠。我们可以使用z-index来控制重叠的优先级。z-index的值越大,其优先级越大。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试叠放次序中调整z-index显示的优先级</title>
	<style type="text/css">
		.father{
			position:absolute;
			width:500px;
			height:500px;
			background-color: blue;  
			top:50px;
			left:100px;
			z-index: 20;
		}
		.child{
			position: absolute;
			width: 500px;
			height:500px;
			background-color: red;
			top:100px;
			left:150px;
			z-index: 30;
		}
		.theSmallestChild{
			position:absolute;
			width: 500px;
			height: 500px;
			background-color: yellow;
			top:150px;
			left:200px;
			z-index: 10;
		}
	</style>
</head>
<body>
	<div class="father"> 
	</div>
	<div class="child"> 
	</div>
	<div class="theSmallestChild"> 
	</div>
</body>
</html>

参考之:https://blog.csdn.net/yongqianbao4519/article/details/80949323

相关标签: position定位