首页 > 其他分享> > 14 CSS定位

14 CSS定位

2022-08-05 11:05:51 作者：互联网

1 相对定位

position: relative

相对定位：相对于自己原来的位置定位

现象和使用：

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

用途：

1.微调元素位置

2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

参考点：

自己原来的位置做参考点。

	<style type="text/css">
		body{
			border: 1px solid orange;
		}
		div{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.one{
			background-color: red;
			position: relative;
			bottom: -20px;
			right: -100px;
		}
	</style>

<body>
	<div class="one">One</div>
</body>

2 绝对定位

position: absolute

特点：

脱离标准文档流，不在页面上占位置
层级提高，压盖现象

参考点：

单独给一个盒子设置绝对定位，以根元素页面左上角为参考点。

相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角进行定位。

子绝父相。也就是说当一个儿子标签设置了绝对定位，那么父标签必须是相对定位。（绝对定位是在相对定位的标签中，找到自己的位置。）

	<style type="text/css">
		body{
			border: 1px solid orange;
		}
		.grandfather{
			position: relative;
			top: 20px;
			left: 30px;
			border: 1px solid purple;
		}

		.one, .two, .three{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.one{
			background-color: red;
			position: absolute;
			top: 200px;
			left: 200px;
			
		}
		div.two{
			width: 400px;
			background-color: green;
			/*position: absolute;*/
		}
		div.three{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="grandfather">
			<div class="one">One</div>
			<div class="two">Two</div>
			<div class="three">Three</div>		
	</div>
</body>

3 固定定位

position: fixed

特点：

脱离标准文档流
设置固定定位后，在页面中滚动网页，固定不变

参考点：

以浏览器的左上角为参考点

应用：

小广告，回到顶部，固定导航栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>固定定位</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: red;
			color: #fff;
		}
		#one{
			position: fixed;
			top: 80px;
			left: 20px;
		}
		.outer{
			width: 500px;
			height: 500px;
			/*border: 1px solid green;*/
			overflow: scroll;
			padding-left: 150px;
		}

	</style>
<body>
	<div class="outer">
		<p>
			此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000
		</p>
		<p>此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000
		</p>
		<div class="box" id="one">one</div>
	</div>

</body>
</html>

4 浮动和定位对行内元素的影响

不是所有的行内元素都是通过display：block设置宽高。

当行内元素span的标签设置了float浮动属性，那么它就脱离了标准文档流。宽带和高度就可以有效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动和定位给行内元素的影响</title>
	<style type="text/css">
		span{
			float: left;
			background-color: red;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<span>我是内行</span>

</body>
</html>

当行内元素span的标签设置了position: absolute绝对定位属性，那么它就脱离了标准文档流。宽带和高度就可以有效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动和定位给行内元素的影响</title>
	<style type="text/css">
		span{
			position: absolute;
			background-color: red;
			width: 200px;
			height: 200px;			
		}
	</style>
</head>
<body>
	<span>我是内行</span>

</body>
</html>

当行内元素span的标签设置了position: fixed固定定位属性，那么它就脱离了标准文档流。宽带和高度就可以有效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动和定位给行内元素的影响</title>
	<style type="text/css">
		span{
			position: fixed;
			background-color: red;
			width: 200px;
			height: 200px;			
		}
	</style>
</head>
<body>
	<span>我是内行</span>

</body>
</html>

注：如果给div设置了浮动，那么会有收缩的效果

标签：定位,省略,14,100000000000000000000000000000000000000000000000000000000,color,positio
来源： https://www.cnblogs.com/it-lkp/p/16553584.html