[华为云WEB前端全栈成长计划]十一、CSS定位

举报
TancyJimVonZ 发表于 2020/07/01 17:03:25 2020/07/01
【摘要】 定位属性使用来设置元素在页面中的位置,我们使用CSS就是为了让页面美观,布局更好,仅仅使用浮动是不够的,所以今天学习定位属性。

定位属性使用来设置元素在页面中的位置,我们使用CSS就是为了让页面美观,布局更好,仅仅使用浮动是不够的,所以今天学习定位属性。

定位属性

image.png

image.png

先来看看static和fixed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位</title>
		<style>
			.div1{
				width: 500px;
				height: 2000px;
				border: 1px solid red;
			}
			.static{
				position: static;
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			.fixed{
				position: fixed;
				width: 200px;
				height: 200px;
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="static"></div>
			<div class="fixed"></div>
		</div>
	</body>
</html>

效果:

image.png

滚动滚动条

image.png

黄色块已经即将被掩盖,而灰色随着滚动条不断变化位置。这就是static和fixed的却别。

相对定位

值元素相对之前默认的位置,进行相对的移动,经常和位置一起使用。

image.png

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位</title>
		<style>
			.box1{
				position: relative;
				left: 100px;
				background-color: yellow;
				width: 100px;
				height: 50px;
			}
			.box2{
				left: 100px;
				background-color: red;
				width: 100px;
				height: 50px;
			}
			.box3{
				position: relative;
				left: 100px;
				background-color: gray;
				width: 100px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

效果:

image.png

绝对定位

image.png

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位</title>
		<style>
			.box1{
				height: 50px;
				background-color: yellow;
			}
			.box2{
				height: 50px;
				background-color: red;
			}
			.box3{
				height: 50px;
				background-color: gray;
			}
			.box4{
				height: 50px;
				background-color: yellow;
			}
			.box5{
				position: absolute;
				height: 50px;
				background-color: red;
			}
			.box6{
				height: 50px;
				background-color: gray;
			}
			.box7{
				height: 50px;
				background-color: yellow;
			}
			.box8{
				position: absolute;
				height: 50px;
				background-color: red;
			}
			.box9{
				position: absolute;
				height: 50px;
				background-color: gray;
			}
			.box10{
				height: 50px;
				background-color: yellow;
			}
			.box11{
				position: absolute;
				height: 50px;
				background-color: red;
				z-index: 1;
			}
			.box12{
				position: absolute;
				height: 50px;
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div class="box1">AAAA</div>
		<div class="box2">BBBB</div>
		<div class="box3">CCCC</div>
		<hr />
		<div class="box4">AAAA</div>
		<div class="box5">BBBB</div>
		<div class="box6">CCCC</div>
		<hr />
		<div class="box7">AAAA</div>
		<div class="box8">BBBB</div>
		<div class="box9">CCCC</div>
		<hr />
		<div class="box10">AAAA</div>
		<div class="box11">BBBB</div>
		<div class="box12">CCCC</div>
		<hr />
	</body>
</html>

截图:

image.png

其中z-index属性进行设置层级,我们可以看到后面两个,灰色和红色覆盖情况。

与此同时,注意看横线的位置,发现,当B和C都设置了绝对定位后,产生了元素塌陷。

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位</title>
		<style>
			
			/*.fat{
				position: absolute;
				height: 300px;
				width: 300px;
				background-color: yellow;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: red;
			}*/
			
			/*.fat1{
				height: 300px;
				width: 300px;
				background-color: yellow;
			}
			.son1{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0px;
				background-color: red;
			}*/
			
			.gra2{
				
				padding: 50px;
				background-color: pink;
			}
			.fat2{
				position: absolute;
				/*position: relative;*/
				height: 300px;
				width: 300px;
				background-color: yellow;
			}
			.son2{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0px;
				left: 0px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!--<div class="fat">
			<div class="son"></div>
		</div>-->
		
		
<!--		
		<div class="fat1">
			<div class="son1"></div>
		</div>-->
		
		
		<div class="gra2">
			<div class="fat2">
				<div class="son2"></div>
			</div>
		</div>
	</body>
</html>

这一个读者可以利用注释来显示不同的效果,探索绝对定位的作用。

注意元素塌陷,绝对定位和相对定位。

以及主要关注绝对定位是相对谁来说,一般来说如果父元素没设置为绝对或者相对元素,那么就是相对body元素进行设置。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。