Почему CSS отображается: Absolute Pulp the Parent Content? ⇐ Javascript

[Anonymous]

Я думал, что отображение CSS: Absolute < /code> не влияет на родительский макет, но я наткнулся на ошибку.

Код: Выделить всё

const wrapper = document.querySelector('.wrapper');
const content = document.getElementById('content');

// Handle mouse enter (hover in)
wrapper.addEventListener('mouseenter', function() {
content.classList.add('expanded');
// Focus on the textarea when it becomes expanded
content.focus();
});

// Handle mouse leave (hover out)
wrapper.addEventListener('mouseleave', function() {
content.classList.remove('expanded');
});< /code>
/* Root container, which can hold other content */
.root {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
background-color: lightgray;
padding: 20px;
}

/* The wrapper is absolutely positioned within the root */
.wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: solid;
background-color: transparent;
}

/* Content (textarea) to be shown/hidden within the wrapper */
.content {
/* position: absolute; */
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-color: coral;
transition: all 0.3s ease-in-out;
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}

.expanded {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}< /code>


Chat with Alice
Hi Alice
Hello Bob
If you click here, then hover, it will create the bug




Type your Message To Alice

Почему весь родительский макет поднимается, когда я нажимаю в любом месте, затем навещаю поле «Src =" https://i.sstatic.net.net/gwxb3 /> < /p>
Зачем это?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... nt-content