CSS：position属性

ChinaDragonDreamer

于 2024-07-23 22:34:05 发布

阅读量521

点赞数 3

分类专栏： # 前端知识点文章标签： css 前端

本文链接：https://blog.csdn.net/ChinaDragon10/article/details/140647184

版权

前端知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、属性值

1.1 fixed

固定位置的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

网站中的固定 header 和 footer 就是用固定定位来实现的；

header效果图

footer效果图

1.2 absolute

绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

会相对于最近的除 static 定位以外的元素进行定位，在使用时要注意设置父元素（或祖先元素）的 position 属性，若父元素（或祖先元素）都没有设置定位属性，absolute 会找到最上层即浏览器窗口，相对于它进行定位了。

效果图

1.3 relative

相对定位的元素，相对于其正常位置进行定位。

不添加额外属性（left，right，top，bottom 等），它表现的如同 static 一样，如 .box_1。属性 left，right，top，bottom 会使元素偏离正常位置

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

效果图

1.4 static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

二、position.css代码

* {
	/* 
		去掉默认内外边距
	 */
	padding: 0rem;
	margin: 0rem;
}

.top {
	width: 100%;
	height: 10rem;
	background-color: red;
}

.topToolBar1 {
	width: 100%;
	height: 3.125rem;
	position: fixed;
	/**
	  display: flex
	 */
	display: flex;

	align-items: center;

	font-size: 1rem;
	background-color: aquamarine;
	/* 
		solid解决border无法显示的问题
	 */
	border-bottom: 0.125rem solid;
	border-bottom-color: #f2f2f2;
}

.topTab {
	position: fixed;
	width: 100%;
	margin-top: 3.25rem;
	height: 3.125rem;
	background-color: gray;
}

.middle {
	width: 100%;
	height: 16.25rem;
	position: relative;
	background-color: blue;
}

.middle-child1 {
	position: absolute;
	width: 18.75rem;
	height: 12.5rem;
	background-color: #b1f5f0;
}

.middle-child2 {
	position: absolute;
	width: 18.75rem;
	height: 2.5rem;
	background-color: #f3d30e;
	z-index: 30;
}

.middle-child1-1 {
	position: relative;
	width: 10rem;
	height: 5rem;
	background-color: #3c00f3;
}

.middle-child1-2 {
	position: relative;
	z-index: 10;
	width: 8rem;
	height: 3.75rem;
	background-color: #f1680e;
}

.middle-child1-3 {
	position: relative;
	width: 6rem;
	height: 2.5rem;
	left: 1.25rem;
	z-index: 20;
	background-color: #5dfa1d;
}

.middle-child1-4 {
	position: relative;
	width: 4rem;
	height: 2.5rem;
	z-index: 20;
	background-color: #18b9f3;
}

.bottom1 {
	width: 100%;
	height: 10rem;
	bottom: 0;
	background-color: green;
}

.bottom2 {
	width: 100%;
	height: 10rem;
	bottom: 0;
	margin-bottom: 3.125rem;
	background-color: green;
}

.bottomTip {
	position: fixed;
	width: 100%;
	height: 3.125rem;
	background-color: gray;
	/* 
		line-height
		单行文字居中显示
	 */
	/* line-height: 3.125rem; */
	text-align: center;
	vertical-align: middle;
	font-size: 0.875rem;
	bottom: 0;
	padding-left: 0.625rem;
	padding-right: 0.625rem;

	/* 
		解决padding-right没有生效问题
		https://www.cnblogs.com/aoximin/p/13173636.html
		
		box-sizing: border-box
		
		这个属性可以设置：
		内部宽度+padding+border=容器宽度=实际宽度。
		
		比如我设置了宽度为100%，那么个宽度为:父类的宽度(100%)=子类的宽度+padding+border
	 */
	box-sizing: border-box;
}

三、position.html

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>测试position</title>
		<link rel="stylesheet" href="../css/position.css" />
	</head>
	<body>
		<!-- https://www.w3cschool.cn/css/css-positioning.html -->
		<div class="top" id="top">
			<div class="topToolBar1">
				<div id="back">返回 </div>
				<div id="search"> 搜索 </div>
				<div id="msg">消息</div>
			</div>
			<div class="topTab">tab</div>
		</div>

		<div class="middle" id="middle">

			<div class="middle-child1">
				<div class="middle-child1-1">
child1-1
				</div>

				<div class="middle-child1-2">
child1-2
				</div>

				<div class="middle-child1-3">
child1-3
				</div>

				<div class="middle-child1-4">
child1-4
				</div>

			</div>

			<div class="middle-child2">child2</div>

		</div>
		<div class="bottom1" id="bottom1">
			<h3>底部1</h3>
		</div>
		<div class="bottom2" id="bottom2">
			<h3>底部2</h3>
			<p>
				底部内容底部内容底部内容底部内容底部内容
				底部内容底部内容底部内容底部内容底部内容
				底部内容底部内容底部内容底部内容底部内容
			</p>
			<p>
				hello hellohellohellohellohellohellohellohello
				wordwordwordwordwordwordwordwordwordwordword
			</p>
			<p>
				endendendendendendendendendendendendendendendL
			</p>
		</div>
		<div class="bottomTip">
			温馨提示温馨提示温馨提示
			温馨提示温馨提示温馨提示
			温馨提示温馨提示温馨提示
			bfdhhhtjtujuj6t
		</div>

	</body>
</html>