前端笔记记录---定位总结
程序员文章站
2022-06-19 16:26:13
声明:以下内容为个人学习总结,可能有理解有误或记录错误之处,初衷是方便自己学习复习记录。定位=定位模式+边偏移。需要掌握的定位模式- 相对定位(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
上一篇: javascript基础知识及变量