position既是一个属性也是一个模块
作为模块,提供与元素定位和层叠相关功能 他是核心模块
包括以下几点
(1)盒子模型的类型和尺寸
(2)布局模型
(3)元素之间的关系
(4)视口大小、图像大小
定位模型包括:
static 自然模型
relative 相对定位模型
abso 绝对定位模型
fixed 固定定位模型
sticky 磁铁定位模型
postion之static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
position: relative;
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(2){
position: static;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
position 之 relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-relative</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
width:300px;
height:300px;
background: blue;
}
.parent div {
width: 80px;
height: 80px;
}
.sub-1 {
position:relative;
background: red;
top:20px;
left: 50px;
}
.sub-2 {
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="sub-1"></div>
<div class="sub-2"></div>
</div>
<div class=""></div>
</body>
</html>
.parent div直接设置了子元素的大小~
position 之absolution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.sub {
position: absolute;
width: 50px;
height: 50px;
}
.tl {
top:0;
left: 0;
background: green;
}
.tr {
top:0;
right: 0;
background: yellow;
}
.br {
bottom:0;
right: 0;
background: black;
}
.bl {
bottom:0;
left: 0;
background: gray;
}
</style>
</head>
<body>
<div class="parent">
<div class="sub tl"></div>
<div class="sub tr"></div>
<div class="sub br"></div>
<div class="sub bl"></div>
</div>
</body>
</html>
position之fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-fixed</title>
<link rel="stylesheet" href="./reset.css">
<style>
.ad-right-float {
position: fixed;
bottom: 50px;
right: 0;
width: 80px;
height: 80px;
background: gray;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad-right-float">
悬停广告
</div>
</body>
</html>
其实最主要的特点就是不会滚动,就比如我们看一个网页时的广告,在滑动页面的时候广告不会动
position之sticky
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-sticky</title>
<link rel="stylesheet" href="./reset.css">
<style>
body {
height: 800px;
overflow: auto;
}
.logo {
width: 100%;
height: 50px;
background: gray;
}
.nav {
position: sticky;
top:0;
width: 100%;
height: 50px;
background: blue;
color:#ffffff;
cursor: pointer;
}
.con{
height: 500px;
}
</style>
</head>
<body>
<div class="con">
<div class="logo">
想象我是网站头图
</div>
<div class="nav">
想象这里是一堆的 banner 导航按钮 | 编辑 | 发布
</div>
</div>
<div>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
</div>
</body>
</html>