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?
#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.