CSS-定位【看这一篇就够了】
目录
定位
相对定位
相对定位的特点
相对定位前后对比
绝对定位的应用场景
1.鼠标滑动到元素，元素少量位置偏移动画
2.网站导航
绝对定位
绝对定位脱离标准的文档流
脱离文档流，层级提升
相对于其最近的定位的父元素进行定位
父元素及其祖先元素都未定位，则相对于body定位
行内元素绝对定位后，具有行内块元素特性
margin:0 auto水平居中失效
top与bottom及left与right同时设置，调节宽高
top与bottom及left与right的优先级
绝对定位的盒子垂直水平居中
绝对定位的应用
绝对定位实现黑色半透明遮罩层
绝对定位实现带三角形的会话框
固定定位
固定定位应用场景
固定定位实现返回顶部
左右固定，中间自适应布局
粘性定位
固定在离自己最近的拥有“滚动机制的祖先上”
元素的父级拥有“滚动机制”
粘性定位应用场景
1.字母排序显示效果
2.表格首行冻结
总结
定位
| 属性值 | 描述 |
|---|---|
| static | 没有定位，元素出现在正常的流中(默认值) |
| relative | 相对定位，相对于自身正常位置进行位置的调整 |
| absolute | 绝对定位，相对于其最近的定位的父元素定位，进行位置调整 |
| fixed | 固定定位 相对于浏览器窗口进行位置调整 |
| sticky | 粘性定位 基于用户的滚动位置进行定位 |
相对定位
盒子可以“相对自己原来的位置”进行位置调整，称之为“相对定位”
- 给需要添加相对定位的元素，加上“position:relative;”
- 元素的位置通过：“left”、“top”、“right”、“bottom”属性进行调整
- 属性值可以是正数，也可以是负数
定位的位置属性 描述 top 向下移动 bottom 向上移动 left 向右移动 right 向左移动 值为负数 往规定方向移动
相对定位的特点
- 相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，即：“元素的初始位置占据的空间会被保留”
- 只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对其他页面元素产生任何影响
相对定位前后对比
<style type="text/css">.box {width: 100px;height: 100px;background-color: skyblue;float: left;}.box2 {background-color: pink;}.box2 {/* 相对定位 */position: relative;/* 右偏移 20px */left: 20px;/* 下偏移20px */top: 20px;}
</style>
<body><div class="box box1">box1</div><div class="box box2">box2</div><div class="box box3">box3</div>
</body>效果：
| 未设置相对定位前效果 | 设置相对定位后效果 |
|---|---|
 |  |
绝对定位的应用场景
1.鼠标滑动到元素，元素少量位置偏移动画
<style>ul {list-style: none;padding: 0;margin: 0;width: 480px;margin: 150px auto;}ul li {width: 100px;height: 120px;background-color: pink;margin: 0px 10px;float: left;}/* 鼠标滑动到li上，li设置为相对定位然后相对自身向上偏移10px向右偏移2px */ul li:hover {position: relative;top: -10px;left: 2px;}
</style>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body>效果：
2.网站导航
<style>body,ul,li {margin: 0;padding: 0;}a {text-decoration: none;color: #fff;}ul {height: 50px;margin-top: 50px;list-style: none;background-color: skyblue;}ul li {float: left;line-height: 50px;}ul li a {display: inline-block;padding: 0px 20px;height: 50px;}ul li a:hover {/* 相对定位，用来微调元素的位置 */position: relative;top: -5px;height: 60px;line-height: 60px;background-color: rgb(24, 181, 243);}
</style>
<body><ul class="menu"><li><a href="#">首页</a></li><li><a href="#">信息</a></li><li><a href="#">前端</a></li><li><a href="#">Java架构师</a></li><li><a href="#">实战</a></li><li><a href="#">我们</a></li></ul>
</body>效果：
绝对定位
盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
- 给需要添加绝对位置的元素，加上：“position:absolute;”
- 元素的位置通过：“left”、“top”、“right”、“bottom”属性进行调整位置
- 属性值可以使正数，也可以是负数
定位的位置属性 描述 top 到上边的距离
bottom 到下边的距离 left 到左边的距离 right 到右边的距离
/* 在不设置相对于谁定位时，默认相对浏览器的（0,0）坐标进行绝对定位 */
position: absolute;
top: 100px;
left: 100px;
绝对定位元素的8大特性
- 绝对定位的元素，相对离自己最近的最近的定位父元素进行位置调整
- 如果没有定位的父元素，则相对body进行位置调整
- 元素完全脱离文档流，释放其原本所占据的空间
- 元素的层级提升，会覆盖在其它元素上
- 行内元素加上定位后吗，会具有行内块元素特性，支持宽高设置
- margin:auto;居中失效
- 定位元素未设置宽高情况下，同时设置top和bottom会改变元素高，同时设置left和right会改变元素宽
- 在元素调整宽高情况下，同时设置top与bottom，会与top值为主，bottom不生效，同时设置left和right则以left为主，right不生效
绝对定位脱离标准的文档流
- 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
- 脱离标注文档流的方法：“浮动”、“绝对定位”、“固定定位”
- 使用绝对定位的元素将会是一种漂浮状态
<style>.box1 {width: 200px;height: 200px;background-color: orange;}.box2 {width: 200px;height: 200px;background-color: skyblue;/* 绝对定位 */position: absolute;top: 200px;left: 300px;}.box3 {width: 200px;height: 200px;background-color: tomato;}
</style><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>效果：
脱离文档流，层级提升
<style>.container {width: 300px;height: 100px;border: 2px solid red;margin: 100px auto;/* 相对定位，是.box2绝对定位的参考对象 */position: relative;}.box {width: 100px;height: 100px;background-color: skyblue;float: left;}.box3 {background-color: khaki;}.box2 {background-color: pink;/* 绝对定位 */position: absolute;/* 与.container元素左边距离为 10px */left: 10px;/* 与.container元素上边距离50px */top: 50px;}
</style>
<body><div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
</body>| .box2未绝对定位前效果 | .box2绝对定位后效果 |
|---|---|
 |  |
相对于其最近的定位的父元素进行定位
父元素未定位，祖先元素定位绝对定位相对于定位的祖先元素定位
<style>.container {width: 200px;height: 200px;border: 2px solid red;margin: 100px auto;/* 相对定位，是.box2绝对定位的参考对象 */position: relative;}.box {width: 100px;height: 100px;background-color: skyblue;margin-top: 100px;}.item {width: 50px;height: 50px;background-color: pink;/* 绝对定位 */position: absolute;/* 与.container元素左边距离为 10px */left: 10px;/* 与.container元素上边距离50px */top: 10px;}
</style>
<body><div class="container"><div class="box"><div class="item"></div></div></div>
</body>| .item未使用绝对定位前效果 | .item使用绝对定位后效果 |
|---|---|
 |  |
父元素及其祖先元素都未定位，则相对于body定位
<style>.container {width: 200px;height: 200px;border: 2px solid red;margin: 100px auto;}.box {width: 100px;height: 100px;background-color: skyblue;margin-top: 100px;}.item {width: 50px;height: 50px;background-color: pink;/* 绝对定位 其父元素和祖先元素都未设置定位，则其相对body定位 */position: absolute;/* 与body左边距离为 10px */left: 10px;/* 与body上边距离10px */top: 10px;}
</style>
<body><div class="container"><div class="box"><div class="item"></div></div></div>
</body>| .item未使用定位前效果 | .item使用绝对定位后效果 |
|---|---|
 |  |
行内元素绝对定位后，具有行内块元素特性
<style>span {/* 行内元素加上绝对定位后，支持宽高设置 */width: 200px;height: 100px;background-color: red;/* 绝对定位 */position: absolute;/* 上偏移50px */top: 50px;/* 左偏移 */left: 50px;}
</style>
<body><span></span>
</body>效果：
margin:0 auto水平居中失效
<style>.box {width: 200px;height: 200px;background-color: skyblue;}.item {width: 100px;height: 100px;background-color: khaki;/* 元素绝对定位 */position: absolute;/* 元素绝对定位后，margin:0 auto;水平居中失效 */margin: 0 auto;}
</style>
<body><div class="box"><div class="item"></div></div>
</body>效果：
top与bottom及left与right同时设置，调节宽高
<style>.box {width: 200px;height: 200px;background-color: skyblue;/* 相对定位 */position: relative;}.item {background-color: khaki;/* 元素绝对定位 */position: absolute;/* 通过以下值，元素会被自动拉宽和拉高，与相对定位元素上下 左右 10px间距 */top: 10px;bottom: 10px;left: 10px;right: 10px;}
</style>
<body><div class="box"><div class="item"></div></div>
</body>效果：
top与bottom及left与right的优先级
<style>.box {width: 200px;height: 200px;background-color: skyblue;/* 相对定位 */position: relative;}.item {width: 50px;height: 50px;background-color: khaki;/* 元素绝对定位 */position: absolute;/* 通过以下值，元素会被自动拉宽和拉高，与相对定位元素上下 左右 5px间距 */top: 50px;bottom: 10px;left: 50px;right: 10px;}
</style>
<body><div class="box"><div class="item"></div></div>
</body>效果：
绝对定位的盒子垂直水平居中
- 绝对定位的盒子垂直居中是一个非常实用的技术
/* 垂直居中 */
position: absolute;
top: 50%;
margin-top: -自己高度一半;/* 水平居中 */
position: absolute;
left: 50%;
margin-left: -自己宽度一半;
绝对定位的应用
绝对定位实现黑色半透明遮罩层
<!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>.container{width: 150px;height: 200px;margin: 100px auto;position: relative;}.container img {width: 150px;height: 200px;}.container::before {display: none;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);;}.container .play-layer {position: absolute;display: block;width: 80px;height: 80px;background: url("/static/play.png") no-repeat center;background-size: cover;top: 50px;left: 40px;display: none;}.container:hover::before {display: block;}.container:hover .play-layer{display: block;}</style>
</head>
<body><div class="container"><img src="/static/jjy.png" alt=""><span class="play-layer"></span></div>
</body>
</html>效果：
绝对定位实现带三角形的会话框
<!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>.container {position: relative;width: 150px;height: 200px;margin: 100px auto;}.container img {width: 150px;height: 200px;}.text {position: absolute;width: 200px;height: 100px;background-color: skyblue;left: 180px;top: 50px;border-radius: 20px;text-align: center;line-height: 100px;display: none;}.text::before {display: block;position: absolute;content: "";width: 0px;border: 20px solid transparent;border-right-color: skyblue;left: -40px;top: 25px;}.container:hover .text{display: block;}</style>
</head>
<body><div class="container"><img src="/static/jjy.png" alt=""><div class="text">大家好，我是鞠婧祎~</div></div>
</body>
</html>效果：
固定定位
- 给需要添加固定定位的元素，加上“position:fixed;”
- 元素的位置通过：“left”、“top”、“right”、“bottom”属性进行调整，属性可以是正数也可以是负数
position: fixed;
top: 100px;
left: 100px;注：
- 固定定位只能以整个页面为参考点（浏览器窗口）
- 固定定位托定标准文档流
- 除其位置是相对于浏览器窗口而言外，其它与绝对定位的特性一致
<style>body {height: 2000px;}.item {width: 200px;height: 200px;background-color: pink;/* 固定定位 */position: fixed;/* 与浏览器顶部100px */top: 100px;/* 与浏览器右边10px */right: 10px;}
</style>
<body><div class="item"></div>
</body>
固定定位应用场景
固定定位实现返回顶部
<style>body {/* 为演示有滚动条的效果，给body设置高度 */height: 2000px;}.top {display: block;width: 60px;height: 50px;background-color: rgb(151, 148, 148);color: #fff;font-size: 12px;text-align: center;line-height: 50px;text-decoration: none;/* 固定定位 */position: fixed;bottom: 100px;right: 20px;}.top:hover {background-color: gold;}
</style>
<body><a href="#" class="top"> 返回顶部 </a>
</body>效果：
左右固定，中间自适应布局
<style>body {margin: 0;}.left {width: 200px;/* 固定定位 */position: fixed;top: 0;bottom: 0;left: 0;background-color: skyblue;}.right {width: 150px;position: fixed;right: 0;top: 0;bottom: 0;background-color: khaki;}.main {margin: 0 160px 0px 210px;background-color: tomato;min-height: 700px;}
</style>
<body><div class="left"></div><div class="main"></div><div class="right"></div>
</body>粘性定位
- 给需要添加粘性定位的元素，加上“position:sticky;”
- 粘性定位可以看做是“相对定位”与“固定定位”的混合产物（这里的固定定位，并不是我们上面说的position:fixed;只是有相似点）
- 当滚动高度小于元素所在位置时，元素以相对定位呈现
- 当滚动高度大于元素所在位置时，元素以固定定位呈现
- 当滚动高度大于（元素的父元素底部与浏览器高）时，元素相对于父元素定位一起移走
- 粘性定位相对离他最近的一个拥有“滚动机制”的祖先元素（当该祖先的overflow是hidden、scroll、auto或overlay时）定位或直接块级父元素定位
固定在离自己最近的拥有“滚动机制的祖先上”
- 当父元素没有滚动条：
<style>body {margin: 0;height: 2000px;}.top {height: 100px;background-color: pink;}.main {width: 1000px;margin: 20px auto;/* 这里的高度一定要大于.head元素的高度，否则看不到粘性定位效果 */height: 700px;background-color: salmon;}.head {height: 200px;background-color: rgb(240, 230, 140, 0.5);/* 粘性定位 */position: sticky;top: 0px;}
</style>
<body><div class="top"></div><div class="main"><!-- 粘性定位的元素 --><div class="head"></div></div>
</body>效果：
元素的父级拥有“滚动机制”
- 当父级元素有滚动条时，元素一直固定在父级元素的最顶部
<style>body {margin: 0;height: 2000px;}.top {height: 100px;background-color: pink;}.main {width: 500px;margin: 20px auto;height: 300px;overflow: auto;}.head {height: 200px;background-color: rgb(240, 230, 140, 0.5);/* 粘性定位 */position: sticky;top: 0px;}.con {height: 700px;background-color: skyblue;}
</style>
<body><div class="top"></div><div class="main"><div class="head">111</div><div class="con">222</div></div>
</body>效果：
粘性定位应用场景
1.字母排序显示效果
<!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>.container {width: 500px;height: 300px;overflow-y: scroll;}dl dt {font-size: 20px;height: 30px;background-color: rgb(255, 192, 203);position: sticky;top: 0;}dl dd {line-height: 30px;font-size: 20px;}</style>
</head>
<body><div class="container"><dl><dt>A</dt><dd>Andrew W.K.</dd><dd>Apparat</dd><dd>Arcade Fire</dd><dd>Apple</dd><dd>Apparent</dd></dl><dl><dt>B</dt><dd>Banana</dd><dd>Ban</dd><dd>Buy</dd><dd>Bad</dd><dd>Binary</dd></dl><dl><dt>C</dt><dd>Christmas</dd><dd>Cheer</dd><dd>Chemistry</dd><dd>China</dd><dd>chorom</dd></dl></div>
</body>
</html>效果：
2.表格首行冻结
<style>.box {width: 500px;height: 200px;/* y轴方向溢出，显示滚动条 */overflow-y: scroll;}table {width: 100%;/* 合并单元格边框线 */border-collapse: collapse;}table tr td,table tr th {border: 1px solid #ddd;}table tr th {background-color: skyblue;height: 50px;/* 表格首行冻结 */position: sticky;top: 0;}table tr td {font-size: 16px;text-align: center;height: 40px;}
</style>
<body><div class="box"><table><tr><th>姓名</th><th>学号</th><th>成绩</th><th>排名</th></tr><tr><td>张三</td><td>0001</td><td>90</td><td>1</td></tr><tr><td>张四</td><td>0002</td><td>80</td><td>2</td></tr><tr><td>张五</td><td>0003</td><td>77</td><td>3</td></tr><tr><td>张六</td><td>0004</td><td>70</td><td>4</td></tr><tr><td>张七</td><td>0005</td><td>67</td><td>5</td></tr><tr><td>张八</td><td>0006</td><td>65</td><td>6</td></tr></table></div>
</body>效果：
总结
| 定位类型 | 描述 | 应用场景 |
|---|---|---|
| 相对定位 relative | 相对自身原来的位置定位，占着原来的位置 | 微调元素的位置，但还占据原来空间 只想提元升素的层级，但还是占原来的空间 |
| 绝对定位 absolute | 相对离自己最近的定位的父元素定位，原来的位置被释放，相当于悬浮在页面中，会覆盖在其它元素的上面显示 | 一个元素想覆盖在另一个元素上面 配合 JS 来实现动画效果 |
| 固定定位 fixed | 相对浏览器窗口进行定位 | 你想让一个元素相对浏览器的位置一直不动 |
| 粘性定位 sticky | 相对离自己最近的拥有滚动机制的父元素定位，或（直接父元素定位） | 吸附效，冻结效果 |