CSS 绝对定位和相对定位我的理解

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

久伴亦久别

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

阅读量364

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/weixin_42501296/article/details/80927274

版权

前端学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

绝对定位不占任何位置的定位(带有绝对定位的div盒子直接不保留之前的位置移动)

相对定位占位置的定位(举例:虽然带有相对定位的div模块移动了,但是这个div之前的占的位置还在的)

绝对定位的div盒子的父亲必须要有一个定位,不然绝对定位就直接以浏览器为基准开始走动

举个例子

没给最外面的DIV定位,给最里面DIV一个绝对定位,发现这个小DIV是沿着浏览器边缘走动的

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.diva {
			width: 500px;
			height:500px;
			background-color:red; 
			margin-left:40px;
		}
		.divb {
			width: 300px;
			height:300px;
			background-color:#ccc; 	
			position: absolute;
			left: 20px;
		}
	</style>
</head>
<body>
<div class="diva">
	<div class="divb"></div>
</div>
</body>
</html>

如果我跟父亲给个相对定位了,效果看下图

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.diva {
			width: 500px;
			height:500px;
			background-color:red; 
			margin-left:40px;
			position: relative;
		}
		.divb {
			width: 300px;
			height:300px;
			background-color:#ccc; 	
			position: absolute;
			left: 20px;
		}
	</style>
</head>
<body>
<div class="diva">
	<div class="divb"></div>
</div>
</body>
</html>

position: absolute;绝对定位

position: relative;相对定位

久伴亦久别

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 绝对定位和相对定位我的理解

绝对定位不占任何位置的定位(带有绝对定位的div盒子直接不保留之前的位置移动)相对定位占位置的定位(举例:虽然带有相对定位的div模块移动了,但是这个div之前的占的位置还在的)绝对定位的div盒子的父亲必须要有一个定位,不然绝对定位就直接以浏览器为基准开始走动举个例子没给最外面的DIV定位,给最里面DIV一个绝对定位,发现这个小DIV是沿着浏览器边缘走动的&lt;!DOCTYPE html&gt...
复制链接

扫一扫