CSS：position属性
一、属性值
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>
四、testH5源码
原文地址：https://blog.csdn.net/ChinaDragon10/article/details/140647184
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！