Позиционировать абсолютно элемент относительно другого элемента без CSS

Question

Итак, есть один элемент с плавающей шириной. И второй элемент, который нужно абсолютным позиционированием прикрепить к первому точно снизу, и точно по ширине.

<style>
    #first {
        position: relative;
        margin: 0 auto;
        width: 80%;
        padding: 20px;
        background: red;
    }
    #second {
        background: blue;
        padding: 20px;
    }
</style>
<div id="first">blabla</div>
<div id="second">blabla</div>

По ряду причин, сделать это с помощью CSS в данном конкретном случае не получится, придется использовать JS, в котором я не силён, и буду благодарен за любую помощь.

Answer 1

const first = document.getElementById('first');
const second = document.getElementById('second');

window.onresize = positionSecond;

positionSecond();

function positionSecond(){
    const rect = first.getBoundingClientRect();
    const width = getComputedStyle(first).getPropertyValue('width');

    second.style.position = 'absolute';
    second.style.top = rect.bottom + 'px';
    second.style.left = rect.left + 'px';
    second.style.width = width;
}

<style>
    #first {
        position: relative;
        margin: 0 auto;
        width: 80%;
        padding: 20px;
        background: red;
    }
    #second {
        background: blue;
        padding: 20px;
    }
</style>
<div id="first">blabla</div>
<div id="second">blabla</div>

БЛОГ НА HUSL

Позиционировать абсолютно элемент относительно другого элемента без CSS

Ответы (1 шт):