一、属性值
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>