HTML5学习_day06(3)--html之绝对定位

最新推荐文章于 2022-11-28 18:41:28 发布

woaiwanshumen

最新推荐文章于 2022-11-28 18:41:28 发布

阅读量671

点赞数

分类专栏： HTML5零基础学习笔记文章标签： html5 绝对定位

本文链接：https://blog.csdn.net/woaiwanshumen/article/details/52753886

版权

HTML5零基础学习笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

绝对定位的定义
position: absolute;

它使相对不是static的最近一次的有定位父元素来进行定义的。（（这里的所有定位都不能是默认值 static）一开始设置定位时就找上一级的父元素是否有定位有就以它为基准定位若是没有就继续往上找直到找到有定位的元素实在没有就会以body为基准定位）

被定位的元素会完全脱离文档流，然后我们可以通过left,right,top,bottom来调整元素的位置。

特点：

1.完全脱离文档流

2.提升层级整级

3.针对父级定位，如果父级没有定位，那就找父级的上一级，如果父级的上一级还是没有定位，最终以ducument进行定位。

<div position>
			<div  position>
				<div style="position: absolute;"></div>
			</div>
		</div>

下面的列子第三层div就是以第二层div来定位因为第二层div就有定位了

4.绝对定位一般配合相对定位使用，相对定位做父级，绝对定位做子级

<div position>
			<div positon>
				<div position:relative>
					<div position:absulute></div>
				</div>
			</div>
		</div>

这里的第四层div的就是子级绝对定位第三层div就是第四层的父级且相对定位

5.支持所有的CSS样式

6.提升定位元素层级的命令 z-index 数字越大，越上层显示

7.如果绝对定位的子级有浮动，可以不做清除浮动操作的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 300px;
				height: 300px;
				background: silver;
				position: relative;
				border: 5px solid red;
				margin: 0px auto;
			}
			#div div{
				text-align: center;
				line-height: 100px;
				width: 100px;
				height: 100px;
				position: absolute;
				background: green;
			}
			.div1{
			}
			.div2{
				left: 200px;				/* right: 0px; top:0px 相同效果*/
			}
			.div3{
				left: 100px;				
				top: 100px;
			}
			.div4{
				top: 200px;				/*left: 0px; bottom: 0px; 相同效果 */
				
			}
			.div5{
				left: 200px;
				top: 200px;				/*right: 0px;  bottom: 0px;  相同效果*/
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div class="div1">1</div>
			<div class="div2">2</div>
			<div class="div3">3</div>
			<div class="div4">4</div>
			<div class="div5">5</div>
			
		</div>
	</body>
</html>

woaiwanshumen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习_day06(3)--html之绝对定位

绝对定位的定义position: absolute;它使相对不是static的最近一次的有定位父元素来进行定义的。（（这里的所有定位都不能是默认值 static）一开始设置定位时就找上一级的父元素是否有定位有就以它为基准定位若是没有就继续往上找直到找到有定位的元素实在没有就会以body为基准定位）被定位的元素会完全脱离文档流，然后我们可以通过left,right,top,
复制链接

扫一扫