css定位
定位
主要实现功能：
①实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
②滚动窗口时，某些元素盒子固定不动。
定位=定位模式+边偏移
定位模式：决定定位的方式，通过css的position属性设置，取值有四个：
-static 静态定位
-relative 相对定位
-absolute 绝对定位
-fixed 固定定位
边偏移：该元素的最终位置，有四个属性 。
-top: 80px 顶端偏移量，距离上边线80px.
-bottom: 80px 底部偏移量，距离上边线80px.
-left: 80px 左侧偏移量，距离上边线80px.
-right: 80px 右侧偏移量，距离上边线80px.
①static 静态定位
默认定位形态，静态定位按照标准流位置摆放，无偏移量，少用
选择器{
position： static；
}
②relative 相对定位
以原来的位置为参照，边偏移量为相对中心的位移量;原来的位置会保留，其他盒子无法占据，不脱标。
选择器{
position：relative；
top: 80px;
left: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.l {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: blueviolet;
}
.o {
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="l">1</div>
<div class="o"> 2</div>
</body>
</html>
结果1号不脱标，2号盒子还按照标准流的位置不改变。
③absolute 绝对定位
如果没有祖先元素或者祖先元素没有定位，则以浏览器为参照；有（定位的！）祖先元素，则以最近一级带有定位的元素为参照，爸爸没有定位找爷爷，爷爷没有找祖公。。。直到找到有定位的祖先元素。
*加了绝对定位的元素会浮起来，不占有原来的位置，会脱标！
选择器{
position： absolute；
top: 80px;
left: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.l {
position: absolute;
width: 500px;
height: 500px;
background-color: blueviolet;
}
.o {
position: absolute;
top: 80px;
left: 250px;
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="l">1</div>
<div class="o"> 2</div>
</body>
</html>
上边距80px，左边距250px
④定位常用方法：子绝父相
子绝父相指的是子级用绝对定位，父级用相对定位。因为子级使用绝对定位时可以放在父级的任何位置，且它的脱标特性使得它不会影响到其他盒子的布局；父级需要添加定位才能挂载拥有绝对定位的子级，且不能脱标，所需要求符合相对定位特性。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.l {
position: relative;
width: 233px;
height: 270px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
}
div img {
background-color: aquamarine;
}
.o {
position: absolute;
top: 4px;
right: -4px;
}
.l div {
margin: 20px;
color: tomato;
font-size: 16px;
}
</style>
</head>
<body>
<div class="l"><img src="imgs/pic.png" />
<img class="o" src="imgs/hot.png" />
<div>
让学习简单起来！
</div>
</div>
</body>
</html>
效果 注意hot的位置：
⑤固定定位
将元素固定在浏览器的某个固定的位置,滚动页面时，元素不滚动。
以浏览器的可视窗口作为参照；且不占有原来的位置，即脱标。
选择器 {
position: fixed;
left:
top:
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.l {
margin: auto;
width: 600px;
height: 2000px;
background-color: thistle;
}
.daji {
position: fixed;
top: 200px;
left: 50%;
margin: 300px;
}
</style>
</head>
<body>
<div class="daji"><img src="imgs/pvp.png" /></div>
<div class="l">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
</body>
</html>
效果比较难展示，自己跑一下吧
1
2
⑥粘性定位
以浏览器的可视窗口为参照；但是会占有原先的位置，即不脱标，必须添加top、left、right、bottom至少其中一个才有效。
兼容性较差，某些浏览器不支持，如IE。
选择器{
position：sticky；
top：0；
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.l {
margin: auto;
width: 600px;
height: 2000px;
background-color: thistle;
}
.daji {
position: sticky;
top: 0px;
width: 300px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="daji"><img src="imgs/pvp.png" /></div>
<div class="l">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
</body>
</html>
效果 自己跑一下会直观些
1原来的位置距离浏览器顶部100px，且不脱标
2滚动后黏住浏览顶部，距离0px，且浮起来，即脱标
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
