css定位（一）---基本定位总结

最新推荐文章于 2022-11-25 17:39:16 发布

兰兰的风。。。

最新推荐文章于 2022-11-25 17:39:16 发布

阅读量216

点赞数 1

分类专栏： # css 文章标签：定位

本文链接：https://blog.csdn.net/pilgrim_121/article/details/111091272

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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

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

需要掌握的定位模式
- 相对定位(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>

固定定位

元素完全脱离文档流，相对浏览器的窗口进行定位，不随滚动条而动

兰兰的风。。。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css定位（一）---基本定位总结

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

扫一扫