Obținerea elementului dl pentru a recunoaște conținutul elementului său dt

Am două coduri CSS următoarele:

dl.set {
    position: relative;
}

dl.set dt {
    position: absolute;
    border: 1px solid #000;
}

și următorul cod HTML:


Scopul meu este să aranjez imaginile pentru a se suprapune reciproc în poziții diferite . Deci, ceea ce am crezut că pot face este să utilizez atributele top și bottom ale unei poziții absolute pentru aranjarea pozițiilor lor.

Elementul dl , totuși, nu recunoaște conținutul elementului dt din interiorul acestuia. Înălțimea casetei elementului dl rămâne ca fiind 0px . Am încercat să dau elementului dl un overflow : hidden pentru a șterge floatul, dar de asemenea nu funcționează . În schimb, se închid elementele dt .

Cum pot obține elementul dl să recunoască și să-și extindă mărimea în funcție de mărimea conținutului elementelor dt , păstrând în același timp poziția lor relative și absolute (pentru că trebuie să poziționez elementele în mod diferit)?

0
@Paul Am editat întrebarea mea cu un exemplu HTML despre ceea ce încerc să obțin. Scopul meu este să aranjez imaginile în elementul dl pentru a se sorta suprapunerii în poziții diferite. Deci, ceea ce am crezut că pot face este să utilizez atributele de sus și de jos ale unei poziții absolute pentru a-ți aranja pozițiile. Dar, desigur, se pare că elementul dl nu își detectează elementele absolute dt.
adăugat autor Carven, sursa
Poziționarea absolută! = Plutitoare
adăugat autor BoltClock, sursa
Aveți un exemplu pentru a vă vedea problema? Poate că există alte modalități de a face acest lucru.
adăugat autor Paul, sursa

1 răspunsuri

absolute positioning moves an element out of the normal flow. Thus, your dl is so-to-say empty, the dt is in another layer.

Dacă poziționați dt absolut, dl nu se va extinde la dimensiunea dt (automat). Va trebui să vă restructurați HTML/CSS sau să veniți cu o soluție de javascript.

0
adăugat