相对定位和绝对定位

最新推荐文章于 2020-02-11 16:46:32 发布

幻想＆逆风

最新推荐文章于 2020-02-11 16:46:32 发布

阅读量121

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44700535/article/details/94400545

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

父相子绝

相对定位：position: relative;

相对定位：该元素相对于自己原本文档中的位置，偏移一定距离，相对的自己。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style type="text/css">
			.div2{
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;/*相对定位*/
				margin-top: 100px;
				margin-left: 100px;
				
			}
		</style>
	</head>
	<body>
		<p>1111</p>
		<p>1111</p>
		<p>1111</p>
		<div class="div2">
			相对定位
		</div>
		
	</body>
</html>

效果图：
在这里插入图片描述

绝对定位：position:absolute

绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
				position: absolute;/*绝对定位*/
				top: 100px;
				left: 100px;
				
			}
			
		</style>
	</head>
	<body>
		<p>1111</p>
		<p>1111</p>
		<p>1111</p>
		
			<div id="div1">
				绝对定位
			</div>
	</body>
</html>

显示效果：
在这里插入图片描述

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该
元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序。

那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left
, top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位
，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）

绝对定位的元素相对于谁来定位，我们就把这个"谁"叫着参照物：
在这里插入图片描述

幻想＆逆风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对定位和绝对定位

父相子绝相对定位：position: relative;相对定位：该元素相对于自己原本文档中的位置，偏移一定距离，相对的自己。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>相对定位</title> <style type="te...
复制链接

扫一扫