CSS position中绝对定位和相对定位的区别以及占位问题

最新推荐文章于 2023-10-21 09:42:12 发布

必看吧

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量6.9k

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_43665697/article/details/98093639

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS中的盒子模型</title>
		<style>
			body {
				margin: 0;
			}
 
			.d1 {
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				position: relative;
				left: 50px;
				top: 50px;
				margin: 20px;
				
				border: 10px solid black;
				padding: 20px;
		
			}
			#d2 {
				width: 200px;
				height: 200px;
				background-color: red;
 
			}
			
 
			#d1 {
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				position: absolute;
				left: 0px;
				top: 0px;
				margin: 20px;				
				border: 10px solid black;
				padding: 20px;
				
			}
 
		</style>
	</head>
	<body>
		<div class="d1">div1</div>
		<div id="d2">div2</div>
		<div id="d1">我是div1的实际占位</div>
	</body>
</html>

先看效果图:

absolute 不占位不会影响其他元素的位置

relative 如果有 top right left buttom 等属性使其发生位移但其实际占位为原位置并不是页面显示位置

首先解释下上图为什么这么显示

代码中先写的dvi1 相对定位并且发生位移他的父级元素为body 所以相对body进行移动为所以最终显示为绿色div所在位置

其次代码中是div2 div是块标记会自动换行所以他的默认位置应该为上一元素的下边也就是div1的下边

但是又因为 div1是相对定位其真实占位应该为空白div位置所以div2正好在其下边显示

需要注意的是如果2个盒子模型都有margin 只有大的margin的占位 (谁的margin大谁占位并不是2个都占位)

如果需要算红色div距离顶部的距离直接算div的高度就行

(注意考虑body的margin 是不是0 谷歌默认8px 还有是不是2个盒子模型都有margin)

此图中距离应该为 body的margin 为0 只有一个盒子有margin 所以距离就为div1的高度也就是 height+padding*2+border*2+margin*2=400px

必看吧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS position中绝对定位和相对定位的区别以及占位问题

!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS中的盒子模型</title> <style> body { margin: 0; } .d1 { width: 300px; heigh...
复制链接

扫一扫