4-6绝对定位以盒子为参考点

最新推荐文章于 2025-05-12 10:53:06 发布

liu1992452008

最新推荐文章于 2025-05-12 10:53:06 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/75331909

HTML 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨CSS中的绝对定位，包括其基本概念、如何实现元素的精确定位、以不同元素为参考点的方法，以及如何利用绝对定位实现元素的居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：（面试题）
 
 div {
            width: 300px;
            height: 900px;
            border: 1px solid black;
        }
        
        .box1 {
            float: left;
            width: 300px;
            height: 300px;
            background: orange;
            border: 1px solid black;
            margin-bottom: 40px;
        }
        
        .box2 {
            float: left;
            width: 300px;
            height: 300px;
            background: orange;
            border: 1px solid black;
            margin-top: 100px;
        }
二、相对定位
定位有三种，分别是相对定位、绝对定位、固定定位。
 
相对定位：
1 position:relative;
绝对定位：
1 position:absolute;
固定定位：
1 position:fixed;
 
每一种定位，都暗藏玄机，所以我们分别讲解。
 

3.1 绝对定位脱标
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：
1 		span{
2 			position: absolute;
3 			top: 100px;
4 			left: 100px;
5 			width: 100px;
6 			height: 100px;
7 			background-color: pink;
8 		}
 
3.2 参考点
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：
 
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：
 
 
 
面试题：
 
答案：
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
 

3.3 以盒子为参考点(因为浏览器的大小是不一样的，在浏览器中漂浮在任意位置没有任何意义)
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
 
*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 400px;
			height: 400px;
			border: 10px solid red;
			margin: 100px;
			position: relative;
		}
		p{
			width: 100px;
			height: 100px;
			background-color: orange;
			position: absolute;
			top: 40px;
			left: 40px;
		}
<div>
		<p></p>
	</div>
 
● 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
*{
			margin: 0;
			padding: 0;
		}
		.box1{
			width: 400px;
			height: 400px;
			padding: 100px;
			border: 10px solid red;
			margin: 100px;
			position: relative;
		}
		.box2{
			width: 300px;
			height: 300px;
			border: 50px solid blue;
		}
		p{
			width: 100px;
			height: 100px;
			background-color: orange;
			position: absolute;	
			top: 40px;
			left: 40px;
		}
<div class="box1">
		<div class="box2">
			<p></p>
		</div>
	</div>
	<div class="box1">   →  相对定位
		<div class="box2">  →  没有定位
			<p></p>   → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
		</div>
	</div>
 
	<div class="box1">   →  相对定位
		<div class="box2">  → 相对定位
			<p></p>   → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
		</div>
	</div>
 
 
● 不一定是相对定位，任何定位，都可以作为参考点
*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 400px;
			height: 400px;
			border: 10px solid red;
			position: absolute;
			top: 100px;
			left: 100px;
		}
		p{
			width: 100px;
			height: 100px;
			background-color: orange;
			position: absolute;
			top: 40px;
			left: 40px;
		}
1 	<div>  → 绝对定位
2 		<p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。
3 	</div>
 
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。
 
1 <div class=”box1”>  → 绝对定位
2 	<div class=”box2”>  → 相对定位
3 		<div class=”box3”>  → 没有定位
4 			<p></p>  → 绝对定位，以box2为参考定位。
5 		</div>
6 	</div>
7 </div>
 
 
 
 
 
 
● 绝对定位的儿子，无视参考的那个盒子的padding。
下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。
p将无视父亲的padding，在border内侧为参考点，进行定位：
 
 * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 150px;
            position: relative;
            margin: 100px;
        }
        
        p {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 40px;
            left: 40px;
        }
<div>
        字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字
        <p></p>
    </div>
为什么要子绝父相？面试题
 
这个三角用绝对定位做更好，相对位置不行，它会占位置，固定定位是针对于整个屏幕来说的，不适合，只能用绝对定位做合适，1，不占位置，2，随便飘 
父亲：父亲需要定位，因为要占位置，所以要相对位置。
所以子绝父相：父亲占位子（相对），儿子就随意飘（绝对）
3.4 绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
 
 
1 			width: 600px;
2 			height: 60px;
			    position: absolute;
3 			left: 50%;
4 			top: 0;
5 			margin-left: -300px;   → 宽度的一半
非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 400px;
            border: 10px solid red;
            margin: 100px;
            position: relative;
        }
        
        p {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 60px;
            left: 60px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>

</body>

</html>