绝对定位

最新推荐文章于 2025-01-20 22:14:23 发布

qq_43663024

最新推荐文章于 2025-01-20 22:14:23 发布

阅读量201

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_43663024/article/details/103818555

版权

前端专栏收录该内容

3 篇文章

订阅专栏

绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		/*定位之前先重置样式*/
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 300px;
				height: 300px;
				background: red;
				/*position: relative;*/
				position: relative;
			}
			div p{
				width: 200px;
				height: 200px;
				background: blue;
				/*绝对定位*/
				/*position: absolute;*/
				/*定位后具有top  bottom  left right*/
				/*绝对定位后不占位置*/
				right: 0px;
				bottom: 0px;
				/*绝对定位参照物: 元素绝对定位后,逐层往父级元素查找是否具有定位方式(不管哪一种定位方式),若父级有定位方式,则以它为参照物,若父级没有,则继续往上级查找,;
				直到查到到body标签后,则以浏览器窗口为参照物
				*/
			}
			div p span{
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
				/*绝对定位元素,脱离文档流变成行内块元素*/
				left: 0px;
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<!--定位：解决页面中元素的排版问题-->
		<!--
		1，固定定位    想要在页面显示随着滚动条滚动而不会滚动的内容
		2，相对定位    相对自身做位置微调
		3，绝对定位    想要以某个元素为参照物
		   子级绝对定位后，父级（参照物）建议给相对定位（在原本没有定位方式的前提下）
		  解决页面布局问题优先使用： 盒子模型 > 浮动 > 定位
		-->
		<div>
			<p>
				<span>
					
				</span>
			</p>
			DIV
		</div>
		<p>子级绝对定位后，父级（参照物）建议给相对定位（在原本没有定位方式的前提下）子级绝对定位后，父级（参照物）建议给相对定位（在原本没有定位方式的前提下）子级绝对定位后，父级（参照物）建议给相对定位（在原本没有定位方式的前提下）</p>
	</body>
</html>
片