Kesukaran meletakkan div

Question

Saya mahu meletakkan div berbanding elemen lain pada halaman.

Ini adalah CSS awal:

#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;
}

Apabila diperlukan, saya melaksanakan kod berikut:

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

Hasilnya ialah:

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

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

(X dan Y ialah sinonim bagi Kiri dan Atas)

Nampak begini:

Persoalannya ialah: Mengapa s.top berbeza daripada p.top?

Answer 1

#kejayaan diposisikan secara mutlak, jadi aliran elemen lain dalam DOM tidak menjejaskan kedudukannya, manakala top 等属性会影响其定位，而 #puzzle 的位置为 static （默认），并且不受 top adalah serupa, tetapi sesuai untuk aliran dokumen.

Dari https://www.w3schools.com/Css/css_positioning.asp

Jika anda mahu #kejayaan berada di sudut kiri atas #teka-teki, anda boleh menetapkan position:relative pada #teka-teki dan pastikan ia adalah induk kepada #kejayaan dalam HTML.