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

14 CSS定位

作者:互联网

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>

image


2 绝对定位

position: absolute

特点:

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

参考点:

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

​ 相对于最近的非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>

image


3 固定定位

position: fixed

特点:

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

参考点:

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

应用:

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

<!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>

image


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