                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

父塊級元素相對定位

如果在div 里面在嵌套一個(gè)p，并且p absolute position 定位，那么p的定位參照物是div還是瀏覽器呢？我理解是div。但是為什么我這個(gè)代碼p沒有緊挨著div的上邊框呢？求解？靴靴

慕仙8028120

2018-01-08

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

關(guān)注問題我要回答

2063

操作

收起

4 回答

慕沐5364116
2018-03-09

div（父級）定位要用絕對定位div{position:absolute;}（相對于瀏覽器），?p（子級）定位要用相對定位 p{position: relative;} （相對于div，它的父級），這個(gè)時(shí)候試著調(diào)整p的right，left，top，bottom，會(huì)產(chǎn)生不一樣的效果

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕沐5364116

p自帶的外邊距樣式要用 p{margin:0;}去掉

2018-03-09 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕沐5364116

這段寫錯(cuò)了，p（子級）定位要用相對定位 p{position: relative;} （相對于本身原來的位置）

2018-03-09 回復(fù) 有任何疑惑可以回復(fù)我~

#3

慕移動(dòng)5947621 回復(fù) 慕沐5364116

但是他不是說可以對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位，為什么 p 不能用絕對定位呢

2018-03-14 回復(fù) 有任何疑惑可以回復(fù)我~

一個(gè)在路上的人
2018-01-10

因?yàn)?lt;p>塊級標(biāo)簽是有外邊距的，你在<p>加一個(gè)”margin:0px;“,這個(gè)時(shí)候隨著你設(shè)置<div>的位置，塊級<p>會(huì)隨著父輩<div>的移動(dòng)跟著一起移動(dòng)。大概是這個(gè)意思（小白）

2 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕仙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>

這是我的代碼。。。求大神解答

我不是很理解這句話：最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕哥1287900

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

2018-01-09 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕哥1287900 回復(fù) 慕哥1287900

說反了是父級用relative 子級用absolute

2018-01-09 回復(fù) 有任何疑惑可以回復(fù)我~