                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

父块级元素相对定位

如果在div 里面在嵌套一个p，并且p absolute position 定位，那么p的定位参照物是div还是浏览器呢？我理解是div。但是为什么我这个代码p没有紧挨着div的上边框呢？求解？靴靴

慕仙8028120

2018-01-08

源自：初识HTML(5)+CSS(3)-升级版 13-6

关注问题我要回答

1989

操作

收起

4 回答

慕沐5364116
2018-03-09

div（父级）定位要用绝对定位div{position:absolute;}（相对于浏览器）， p（子级）定位要用相对定位 p{position: relative;} （相对于div，它的父级），这个时候试着调整p的right，left，top，bottom，会产生不一样的效果

0 回复有任何疑惑可以回复我~

收起回答

慕沐5364116

p自带的外边距样式要用 p{margin:0;}去掉

2018-03-09 回复有任何疑惑可以回复我~

慕沐5364116

这段写错了，p（子级）定位要用相对定位 p{position: relative;} （相对于本身原来的位置）

2018-03-09 回复有任何疑惑可以回复我~

慕移动5947621 回复慕沐5364116

但是他不是说可以对于其最接近的一个具有定位属性的父包含块进行绝对定位，为什么 p 不能用绝对定位呢

2018-03-14 回复有任何疑惑可以回复我~

一个在路上的人
2018-01-10

因为<p>块级标签是有外边距的，你在<p>加一个”margin:0px;“,这个时候随着你设置<div>的位置，块级<p>会随着父辈<div>的移动跟着一起移动。大概是这个意思（小白）

2 回复有任何疑惑可以回复我~

收起回答

慕仙8028120 提问者
2018-01-09

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
	border:2px red solid;
	position:absolute;
	right:100px;
	top:20px;
}
p{width: 100px;
height:100px;
border: 5px dashed black;
position: absolute;
right:0px;
top:0px;
}
</style>
</head>
<body>
<div id="div1"><p>kudo</p></div>
</body>
</html>

这是我的代码。。。求大神解答

我不是很理解这句话：最接近的一个具有定位属性的父包含块进行绝对定位

0 回复有任何疑惑可以回复我~

收起回答

慕哥1287900

把p的positiong:relative 你的上面和下面都是position:absolute

2018-01-09 回复有任何疑惑可以回复我~

慕哥1287900 回复慕哥1287900

说反了是父级用relative 子级用absolute

2018-01-09 回复有任何疑惑可以回复我~