Как правильно установить абсолютный элемент внутри сетки отображения? ⇐ CSS

Разбираемся в CSS
Ответить
Anonymous
 Как правильно установить абсолютный элемент внутри сетки отображения?

Сообщение Anonymous »

У меня есть фрагмент кода ниже, я хочу добиться того, чтобы .child, который является панелью, не отображался в верхней части класса .content, однако .child устанавливается в верхней части класса .data. Я не понимаю, почему это происходит.
Насколько я понимаю, абсолютный элемент занимает границу ближайшего относительного элемента, то есть .content в моем случае. Тем не менее мой элемент .child принимает верхнее значение из класса .data. Я не понимаю, почему.
Есть ли что-то, что я здесь делаю неправильно, если да, то как я могу добиться приведенного ниже случая, я хочу, чтобы независимо от того, сколько мы прокручивали , я хочу, чтобы панель всегда отображалась в видимой области экрана элемента .content.

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

.main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(0, 100%);
grid-template-areas: "header" "menu" "content";
height: 75vh;
}

.header {
grid-area: header;
}

.menu {
grid-area: menu;
}

.content {
grid-area: content;
overflow-y: auto;
background-color: #f5f5f5;
position: relative;
}

.child {
position: absolute;
top: 0;
right: 0;
width: 40%;
background-color: aqua;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "head" "body" "footer";
height: 100%;
}

.child .head {
grid-area: head;
background-color: red;
}

.child .body {
grid-area: body;
overflow-y: scroll;
}

.child .footer {
grid-area: footer;
background-color: red;
}

.data {
position: relative;
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.btn {
display: block;
margin-block:  15px;
}

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





     & l t ; m e t a   h t t p - e q u i v = " X - U A - C o m p a t i b l e "   c o n t e n t = " i e = e d g e "   / & g t ; < b r   / >     & l t ; t i t l e & g t ; H T M L   +   C S S & l t ; / t i t l e & g t ; < b r   / >     & l t ; l i n k   r e l = " s t y l e s h e e t "   h r e f = " s t y l e s . c s s "   / & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >     & l t ; d i v   c l a s s = " m a i n " & g t ; < b r   / >         & l t ; s e c t i o n   c l a s s = " h e a d e r " & g t ; T h i s   i s   h e a d e r & l t ; / s e c t i o n & g t ; < b r   / >         & l t ; s e c t i o n   c l a s s = " m e n u " & g t ; T h i s   i s   m e n u & l t ; / s e c t i o n & g t ; < b r   / >         & l t ; s e c t i o n   c l a s s = " c o n t e n t " & g t ; < b r   / >             & l t ; d i v   c l a s s = " d a t a " & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel

child head

vel fermentum ligula pellentesque sed.  Nam nibh ex, placerat sed finibus non, bibendum id mauris. Phasellus porta felis velit, vel fringilla tellus condimentum quis. Ut sollicitudin venenatis nulla vel maximus. Suspendisse rutrum nibh ut est tempus, a
pretium ex bibendum. Phasellus euismod sagittis massa at hendrerit. Nam eget maximus nisi. Quisque convallis, magna id lobortis consectetur, magna libero mollis lorem, sed cursus diam est nec felis. Sed ultricies leo nec lacinia mattis. Donec
tincidunt sodales mi, id fringilla lectus dignissim quis. Donec enim enim, tincidunt nec ante eu, mollis cursus justo. Cras dictum diam non nibh tristique, vel convallis mauris varius. Aenean blandit massa erat, vitae hendrerit purus finibus
a. Aenean tempor pellentesque ligula, ut lobortis quam eleifend et. Praesent convallis efficitur porta.  Pellentesque rutrum maximus diam, et volutpat ligula ornare vitae.

child footer




const btns = document.querySelectorAll(".btn");
const child = document.querySelectorAll(".child")[0];
btns.forEach(function(button) {
button.addEventListener("click", () => {
child.style.display = child.style.display == "none" ? "grid" : "none";
});
});

  • Мое текущее решение, которое является обходным, Я вручную устанавливаю верхнюю позицию прокрутки для div контента на 0.

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

const btns = document.querySelectorAll(".btn");
const child = document.querySelectorAll(".child")[0];
btns.forEach(function(button) {
button.addEventListener("click", () => {
const isVisibleLastTime = child.style.display == "grid"
child.style.display = !isVisibleLastTime ? "grid" : "none";
// Work around solution
if (!isVisibleLastTime) {
const content = document.querySelectorAll(".content")[0]
content.scrollTop = 0 // I am manually setting scroll position to top 0
}
btns.forEach(b =>  UpdateAllButtonText(b, isVisibleLastTime))
});
});

function UpdateAllButtonText(btn, isVisible) {
btn.textContent = !isVisible ? "Hide Panel" : "Show Panel"
}

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

.main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(0, 100%);
grid-template-areas: "header" "menu" "content";
height: 75vh;
}

.header {
grid-area: header;
}

.menu {
grid-area: menu;
}

.content {
grid-area: content;
overflow-y: auto;
background-color: #f5f5f5;
position: relative;
}

.child {
position: absolute;
top: 0;
right: 0;
width: 40%;
background-color: aqua;
display: none;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "head" "body" "footer";
height: 100%;
}

.child .head {
grid-area: head;
background-color: red;
}

.child .body {
grid-area: body;
overflow-y: scroll;
}

.child .footer {
grid-area: footer;
background-color: red;
}

.data {
position: relative;
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.btn {
display: block;
margin-block:  15px;
}

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





     & l t ; m e t a   h t t p - e q u i v = " X - U A - C o m p a t i b l e "   c o n t e n t = " i e = e d g e "   / & g t ; < b r   / >     & l t ; t i t l e & g t ; H T M L   +   C S S & l t ; / t i t l e & g t ; < b r   / >     & l t ; l i n k   r e l = " s t y l e s h e e t "   h r e f = " s t y l e s . c s s "   / & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >     & l t ; d i v   c l a s s = " m a i n " & g t ; < b r   / >         & l t ; s e c t i o n   c l a s s = " h e a d e r " & g t ; T h i s   i s   h e a d e r & l t ; / s e c t i o n & g t ; < b r   / >         & l t ; s e c t i o n   c l a s s = " m e n u " & g t ; T h i s   i s   m e n u & l t ; / s e c t i o n & g t ; < b r   / >         & l t ; s e c t i o n   c l a s s = " c o n t e n t " & g t ; < b r   / >             & l t ; d i v   c l a s s = " d a t a " & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n   c l a s s = " b t n " & g t ; s h o w P a n e l & l t ; / b u t t o n & g t ; < b r   / >                 showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel
showPanel

child head

vel fermentum ligula pellentesque sed.  Nam nibh ex, placerat sed finibus non, bibendum id mauris. Phasellus porta felis velit, vel fringilla tellus condimentum quis. Ut sollicitudin venenatis nulla vel maximus. Suspendisse rutrum nibh ut est tempus, a
pretium ex bibendum. Phasellus euismod sagittis massa at hendrerit. Nam eget maximus nisi. Quisque convallis, magna id lobortis consectetur, magna libero mollis lorem, sed cursus diam est nec felis. Sed ultricies leo nec lacinia mattis. Donec
tincidunt sodales mi, id fringilla lectus dignissim quis. Donec enim enim, tincidunt nec ante eu, mollis cursus justo. Cras dictum diam non nibh tristique, vel convallis mauris varius. Aenean blandit massa erat, vitae hendrerit purus finibus
a. Aenean tempor pellentesque ligula, ut lobortis quam eleifend et. Praesent convallis efficitur porta. Pellentesque rutrum maximus diam, et volutpat ligula ornare vitae.

child footer



Подробнее здесь: https://stackoverflow.com/questions/789 ... -correctly
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»