从前端小白到大佬盒子定位

本文主要是介绍从前端小白到大佬盒子定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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，且浮起来，即脱标