亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

定位 div 困難
P粉752290033
P粉752290033 2024-04-04 12:14:58
0
1
688

我想相對(duì)於頁(yè)面上的其他元素放置一個(gè) div。

這是初始 CSS:

#puzzle
{
 display:inline-block;
 vertical-align: top;

 (position: static;)
}

#success
{
 display: none;
 position: absolute;
 top: 235px;
 left: 130px;
 border: 3px solid blue;
 border-radius:25px;
 color: blue;
 background-color: #cfd;
 text-align:center;
 padding:40px;
 font-size:20pt;
}

當(dāng)需要時(shí),我執(zhí)行以下程式碼:

let p = puz.getBoundingClientRect();
let s = getelem("success");
s.style.left = p.left;
s.style.top = p.top;
s.style.display = "block";

結(jié)果是:

puz.getBoundingClientRect()
DOMRect { x: 38, y: 183, ... }

document.getElementById("success").getBoundingClientRect()
DOMRect { x: 38, y: 33.833 ... }

(X 和 Y 是 Left 和 Top 的同義字)

看起來(lái)像這樣:

問(wèn)題是: 為什麼 s.top 與 p.top 不同?

P粉752290033
P粉752290033

全部回覆(1)
P粉635509719

#success 是絕對(duì)定位的,因此DOM 中其他元素的流動(dòng)不會(huì)影響其定位,而top 等屬性會(huì)影響其定位,而#puzzle 的位置為static (預(yù)設(shè)),且不受top 和類似,但適合文件流。

來(lái)自https://www.w3schools.com/Css/css_positioning.asp

如果您希望 #success 位於 #puzzle 的左上角,您可以在 #puzzle 上設(shè)定 position:relative 並確保它是 HTML 中 #success 的父級(jí)。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板