欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端笔记记录---定位总结

程序员文章站 2022-06-19 16:26:13
声明:以下内容为个人学习总结,可能有理解有误或记录错误之处,初衷是方便自己学习复习记录。定位=定位模式+边偏移。需要掌握的定位模式- 相对定位(relative)- 绝对定位(absolute)- 固定定位(fixed)边偏移:top,bottom,left,right相对定位元素相对于它原来在标准流中的位置 来定,且元素位置不脱离标准流:绝对定位元素以带有定位的最近父级元素(若父元素无定位,则以浏览器)来定,且元素位置脱离标准流相对定位与绝对定位总结当子元素使用绝对....

声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!

定位=定位模式+边偏移。

  1. 需要掌握的定位模式
    - 相对定位(relative)
    - 绝对定位(absolute)
    - 固定定位(fixed)
  2. 边偏移: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

相关标签: css html