网页基础（二十三）绝对定位

最新推荐文章于 2023-03-30 09:35:00 发布

@大娱乐家

最新推荐文章于 2023-03-30 09:35:00 发布

阅读量303

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104648873

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style>
			/*
			 * position: absolute开启了绝对定位
			 * 1.绝对定位参照物是相对于离它最近的开启了定位的祖先元素进行便宜
			 * 如果他的祖先元素没有定位 会根据当前窗口浏览器进行定位
			 */
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
				margin-left: 10px;
			}
			.box1{
				width: 300px;
				height: 300px;
				clear: both;
				background-color: blue;
				position: relative;
			}
			.box2{
				width: 50px;
				height: 50px;
				background-color: #808080;
				position: absolute;
				left: 30px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box1">
				<div class="box2"></div>
			</div>
		</div>
	</body>
</html>

这是在有祖先元素.box1开启定位后成为box2的祖先元素

棕色方块以祖先元素为参照物如果没有设置box1定位就会根据当前浏览器定位效果如下

优惠劵

@大娱乐家

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页基础（二十三）绝对定位

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> /* * position: absolute开启了绝对定位 * 1.绝对定位参照物是相对于离它最近的开启了定位的祖...
复制链接

扫一扫