前端笔记记录---定位总结
程序员文章站
2022-03-08 08:05:07
声明：以下内容为个人学习总结，可能有理解有误或记录错误之处，初衷是方便自己学习复习记录。定位=定位模式+边偏移。需要掌握的定位模式- 相对定位(relative)- 绝对定位(absolute)- 固定定位(fixed)边偏移：top,bottom,left,right相对定位元素相对于它原来在标准流中的位置 来定，且元素位置不脱离标准流：绝对定位元素以带有定位的最近父级元素（若父元素无定位，则以浏览器）来定，且元素位置脱离标准流相对定位与绝对定位总结当子元素使用绝对....
声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！
定位=定位模式+边偏移。
- 需要掌握的定位模式
- 相对定位(relative)
- 绝对定位(absolute)
- 固定定位(fixed) - 边偏移：top,bottom,left,right
相对定位
元素相对于它原来在标准流中的位置 来定，且元素位置不脱离标准流：
绝对定位
元素以带有定位的最近父级元素（若父元素无定位，则以浏览器）来定，且元素位置脱离标准流
相对定位与绝对定位总结
当子元素使用绝对定位时，父元素最好使用相对定位，即：子绝父相。原因就是：如果父元素使用绝对定位时，则父元素就会脱离文档流，其他盒子的位置就会发生变化（跑到父元素原来的位置上去）；如果父元素使用相对定位，那么父元素保留位置，不会影响页面上其他元素的位置。
案例分析：
实现代码：
<!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>
.box1 {
width: 1000px;
height: 82px;
background-color: pink;
margin:0 auto;
position: relative;
/*相对定位元素不脱离文档流，占据位置，所以不会影响box2的位置显示*/
}
.arrow-l {
/*绝对定位元素相对于最近定位的父级元素定，脱离文档流*/
position: absolute;
top: 23px;
left: 0px;
}
.arrow-r {
position: absolute;
right: 0px;
top: 23px;
}
.box2 {
/*无定位，正常文档流显示*/
width: 1000px;
height: 82px;
background-color: #c1cbd7;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box1">
<img src="imgs/banner.png" alt="广告栏" width="1000px">
<img src="imgs/arrow-l.png" alt="左箭头" width="40px" class="arrow-l">
<img src="imgs/arrow-r.png" alt="右箭头" width="40px" class="arrow-r">
</div>
<div class="box2"></div>
</body>
</html>
固定定位
元素完全脱离文档流，相对浏览器的窗口进行定位，不随滚动条而动
本文地址：https://blog.csdn.net/pilgrim_121/article/details/111091272
上一篇： 【Vue学习总结】Vue路由中的嵌套
下一篇： python给list排序的简单方法