html和CSS基础学习（十三）

最新推荐文章于 2023-12-20 20:59:16 发布

MsStrbig

最新推荐文章于 2023-12-20 20:59:16 发布

阅读量605

点赞数

分类专栏： HTML+CSS 文章标签： css html 前端 div布局

本文链接：https://blog.csdn.net/MsStrbig/article/details/78185314

版权

HTML+CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

（1）在网页制作中让box2和box3并排在一起使用可以浮动，也可以使用外边距，当margin-top为负值可以向上移动。

.box2{

width:200px;

height:200px;

background-color:hotpink;

/*margin-left:200px;*/

/*float:left;*/

}

.box3{

width:200px;

height:200px;

background-color:teal;

/*margin-top:-200px;*/

/*float:left;*/

}

position: relative;

left: 200px;

bottom:200px ;//相对定位不会改变元素的性质，但会提高元素的级别，不会脱离文档流，相对于元素在文档流中原来的位置。

（2）

绝对定位:绝对定位会让元素脱离文档流，绝对定位是以开启了定位最近的祖先元素为基准的

.box2{

width:200px;

height:200px;

background-color:hotpink;

/*margin-left:200px;*/

/*float:left;*/

/*position:relative;

left:200px;相对定位是为原来位置坐定位，元素不会脱离文档流

top:200px;*/

position:absolute;

}

.box3{

width:200px;

height:300px;

background-color:teal;

/*margin-top:-200px;*/

/*float:left;*/

}

三个盒子没有浮动，垂直排列在一起

但是由于绝对定位元素浮动，后面元素就会定上来

为红色外套入一个黑色的盒子，会发现红色盒子绝对定位是以黑色盒子为基准的。所以绝对定位是以最近开启了定位的祖先元素为基准的，不是兄弟元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width:200px ;
				height: 200px;
				background-color:greenyellow ;
			}
			.box2{
				width:200px ;
				height: 200px;
				background-color:hotpink ;
				/*margin-left: 200px;*/
				/*float: left;*/
				/*position: relative;
				left: 200px;相对定位是为原来位置坐定位，元素不会脱离文档流
				top:200px ;*/
				position: absolute;
				top:0px;
				left: 0px;
			}
			
			.box3{
				width:400px ;
				height: 400px;
				background-color:teal ;
				/*margin-top: -200px;*/
				/*float: left;*/
			}
			.box4{
				width:300px ;
				height: 300px;
				background-color:black ;
				position:relative ;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box3">
			<div class="box4">
			
			<div class="box2"></div>
			
		</div>
	</div>
		
		
		
	</body>
</html>

（三）

Position：fixed 表示固定定位

<!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: greenyellow;
				position:fixed ;
				left: 0px;
				top: 0px;
				/*固定定位始终是以游览器窗口为坐标轴的，不会随着滚动条移动，其余的特性
				 与absolute相同IE6不支持绝对定位*/
			}
			.box3{
				
				width: 200px;
				height: 200px;
				background-color: bisque;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		
		
		
	</body>
</html>

（四）

层级

当元素层级不一样时候，绿色开启了绝对定位层级高于其他两个，就会覆盖