WEB前端 | HTML基础——(4)定位position

最新推荐文章于 2023-12-25 17:00:00 发布

Erosvan

最新推荐文章于 2023-12-25 17:00:00 发布

阅读量1.2k

点赞数 1

分类专栏： HTML基础文章标签：定位 position relative absolute fixed

本文链接：https://blog.csdn.net/Erosvan/article/details/52516603

版权

HTML基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
	<html>
	<head>
		<meta charset="utf-8"/>
		<title>定位</title>
		<style type="text/css">
			body {
				height: 3000px;
			}
			.div {
				width: 200px;
				height: 200px;
			}
			.div1 {
				width: 600px;
				height: 600px;
				background-color: red;
			}
			.div2 {
				width: 400px;
				height: 400px;
				background-color: yellow;
				position: relative;
				top: 100px;
				left: 100px;
				/*static 默认值
				relative 相对定位，相对于自身，没有脱离文档流，自身所占空间还在，只是位置发生了改变

				fixed    固定定位，固定在窗口某一个位置一般可以做广告位，做返回顶部的按钮

				absolute 绝对定位，相对于带有position属性的父(父..)级来定位
				                 如果父级都没有position属性，则相对于窗口(不是body)的左上角来定位

				设置position属性之后，必须设置相应的top、left、bottom属性才能去定位
				*/
				/*position: relative;
				top: 50px;
				left: 100px;*/
				/*position: fixed;*/
			}
			.div3 {
				background-color: green;
				position: absolute;
				top: 100px;
				left: 100px;
				z-index: 10;
			}
		</style>
	</head>
	<body>
		<div class="div1 div">
			<div class="div2 div">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
				<div class="div3 div">
				</div>
			</div>
		</div> 
	</body>
</html>