position样式属性

最新推荐文章于 2024-10-09 11:12:18 发布

QBjie

最新推荐文章于 2024-10-09 11:12:18 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107358950

版权

position：用于定义建立元素布局所用的定位类型，该属性有多个值

1：static：默认值。没有定位，

2：生成相对定位的标签，相对于自己位置进行变换。例如：“left:20px” 会向标签的left位置移动 20 像素

3：absolute：相对于标签本身第一个position为非 static父元素进行定位，标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。

4：fixed生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。元素通过 "left", "top", "right" 以及 "bottom" 属性进行定位。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="first"></div>
			<div id="second"></div>
			<div id="third"></div>
		</div>
		<style>
			#container{
				border: 5px solid yellow;
				width: 300px;
				height: 300px;
			}
			#first,#second,#third{
				width: 100px;
				height: 100px;
			}
			
			#first{
				background-color: red;
			}
			#second{
				position: fixed;
                                right: 10px;                
                                bottom: 10px;
				background-color: green;
			}
			#third{
				width: 150px;/*因为second进行了浮动，因此third会升上去，因而被掩盖，可以增加宽度来证明second1确实漂浮起来了*/
				background-color: blue;
			}
			#second:hover{
				background-color: blueviolet;
			}
		</style>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

未在#second加（right: 10px; bottom: 10px;）浮动后：

加上后相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。

将#second换为

#second{
        position:relative; 
        left: 10px;
	bottom: 10px;
	background-color: green;
}

效果为：

改为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
		<div id="container">
			<div id="first"></div>
			<div id="second"></div>
			<div id="third"></div>
		</div>
		<style>
			#container{
				border: 5px solid yellow;
				width: 300px;
				height: 300px;
			}
			#first,#second,#third{
				width: 100px;
				height: 100px;
			}
			
			#first{
				background-color: red;
			}
			#container{
				position: relative;
			}
			#second{
				position:absolute;/*相对于父标签定位，该父标签position不能是static*/
				right: 10px;
				bottom: 10px;
				background-color: green;
			}
			
			#third{
				width: 150px;
				background-color: blue;
			}
		</style>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

效果为：