html 盒子模型基础（相对定位，绝对定位，固定定位）（八）

最新推荐文章于 2021-07-31 11:48:50 发布

咸鸭蛋炒饭

最新推荐文章于 2021-07-31 11:48:50 发布

阅读量1.3w

点赞数 7

分类专栏： HTML5基础篇文章标签： css html 经验布局

本文链接：https://blog.csdn.net/u010853130/article/details/54908149

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.相对定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				/*margin-left: 200px;
				margin-top: 200px;*/
				
				/*
				 	定位
				 		- 通过定位可以将元素摆放到页面中的指定位置，但是默认情况下元素并没有开启定位
				 			所以使用定位之前需要先开启定位。
				 		- 通过position属性来设置元素的定位
				 		- 可选值：
				 			static，默认值，此时元素没有开启定位
				 			relative，开启元素的相对定位
				 			absolute，开启元素的绝对定位
				 			fixed，开启元素的固定定位	
				 			
				 	
				 	1.相对定位
				 		- 当元素的position属性值设置为relative时，则开启了元素的相对定位	
				 		- 相对定位的特点：
				 			1.开启相对定位以后，如果不指定偏移量，元素位置不会发生任何变化	
				 			2.相对定位的元素是相对于其自身在文档流中的位置进行定位的
				 			3.相对定位的元素不会脱离文档流
				 			4.相对定位会使元素提升一个层级（文档流中的元素 < 浮动元素 < 定位元素）
				 			5.相对定位不会改变元素的性质，块还是块，内联还是内联
				 			
				 		- 偏移量（offset）
				 			- 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置
				 			- top
				 				- 元素相对于其定位位置的上边的偏移量
				 			- right
				 				- 元素相对于其定位位置的右边的偏移量
				 			- bottom
				 				- 元素相对于其定位位置的底部的偏移量
				 			- left	
				 				- 元素相对于其定位位置的左侧的偏移量
				 * 
				 * */
				
				position: relative;
				
				left: 100px;
				top:200px;
				
				/*
				 	z-index
				 		- z-index，只对开启了定位的元素起作用
				 		- 他可以用来设置元素的层级
				 		- 它需要一个正整数作为值，数越大层级越高，层级越高越优先显示
				 			如果层级一样，谁在下边显示谁
				 * */
				z-index: 9999;
				
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: orange;
				
				/*margin-top: -200px;*/
				
				position: relative;
				
				z-index: 2;
			}
			
			span{
				/*开启相对定位*/
				position: relative;
				width: 100px;
				height: 100px;
				background-color: yellow;
				
			}
			
			
		</style>
	</head>
	<body>
		
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		
		<span>我是一个span</span>
	</body>
</html>

2.偏移量：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
				position: relative;
				/*top:200px;
				left: 200px;*/
				/*
				 	一般情况下，我们对一个元素进行定位，只需要使用四个偏移量中的两个
				 		top left
				 		top right
				 		bottom left
				 		bottom right
				 	
				 * */
				
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="box1"></div>
		
	</body>
</html>

3.绝对定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				/*
				 	绝对定位：
				 		- 当前元素的position属性设置为absolute时，则开启了元素的绝对定位
				 		- 绝对定位的特点：
				 			1.绝对定位的元素会完全脱离文档流
				 			2.绝对定位的元素如果不设置偏移量，位置不会改变
				 			3.绝对定位的元素会相对于离它最近的开启了定位的祖先元素进行定位
				 				如果所有的祖先元素都没有开启定位，则相对于浏览器的窗口进行定位
				 				所以一般我们为一个元素开启绝对定位的同时，都会为它的父元素开启相对定位
				 			4.绝对定位会提升元素的层级
				 			5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度被子元素撑开	
				 * */
				
				/*开启box2的绝对定位*/
				position: absolute;
				
				/*将元素定位到原点*/
				left: 0;
				top: 0;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: orange;
			}
			
			.box4{
				width: 400px;
				height: 400px;
				background-color: skyblue;
				
			}
			
			.box5{
				width: 300px;
				height: 300px;
				background-color: chocolate;
				
			}
			
			span{
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				position: absolute;
			}
			
			
		</style>
	</head>
	<body>
		
		<div class="box1"></div>
		
		
		<div class="box4">
			
			<div class="box5">
				
				<div class="box2"></div>
				
			</div>
			
		</div>
		
		
		
		<div class="box3"></div>
		
		<span>我是一个小span</span>
		
	</body>
</html>

4.固定定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				/*
				 	固定定位也是一种绝对定位，它是一种特殊的绝对定位，它的大部分特点都会绝对定位一致.
				 		不同的是固定定位永远相对于浏览器的窗口进行定位，而且固定的定位的元素一旦定位，则会固定在浏览器窗口中不动，
				 			即使浏览器的滚动条滚动，它也不会移动
				 		固定定位的元素不会随滚动条滚动	
				 		
				 		
				 * 	通过将元素的position属性设置为fixed来开启固定定位
				 * */
				
				position: fixed;
				
				top:0;
				left: 0;
				
				/*设置元素透明*/
				/*
				 	通过opacity，可以设置元素的透明效果
				 		该样式需要一个0-1之间的值
				 		1 表示完全不透明
				 		0 表示完全透明
				 * 
				 * */
				opacity: 0.5;
				
				/*
				 	opacity这个属性不支持IE8及以下的浏览器
				 	IE8及以下的浏览器需要使用其他的方式来设置
				 	
				 		filter: alpha(opacity=60);
				 		
				 		这里的透明需要一个 0 - 100之间的值
				 		100表示完全不透明
				 		0 表示完全透明
				 * */
				filter: alpha(opacity=50);
				
				
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: orange;
			}
			
			.box4{
				width: 400px;
				height: 400px;
				background-color: skyblue;
				
			}
			
			.box5{
				width: 300px;
				height: 300px;
				background-color: chocolate;
				
			}
			
			
		</style>
	</head>
	<body style="height: 5000px;">
		
		<div class="box1"></div>
		
		
		<div class="box4">
			
			<div class="box5">
				
				<div class="box2"></div>
				
			</div>
			
		</div>
		
		
		
		<div class="box3"></div>
		
		
	</body>
</html>

咸鸭蛋炒饭

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
1
评论
html 盒子模型基础（相对定位，绝对定位，固定定位）（八）

1.相对定位： .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; /*margin-
复制链接

扫一扫