css Question posted in
Some basic documentation can be found here.

Css – How to set absolute element inside display grid correctly?

I have below code snippet, what I want to achieve is that .child which is panel should not be shown, to the top of .content class, however, .child is setting at top of .data class. I don’t understand why this is happening.

According to my understanding, absolute element takes boundary of nearest relative element, which is .content in my case. Still my .child element is taking top value from .data class. I don’t understand why.

Is there something I am doing wrong here, if yes how can I achieve below case, what I want to do is that no matter how much we have scrolled, I want panel to be shown always in visible screen area of .content element.

.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;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML + CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <section class="header">This is header</section>
    <section class="menu">This is menu</section>
    <section class="content">
      <div class="data">
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
      </div>
      <div class="child">
        <div class="head">child head</div>
        <div class="body">
          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.
        </div>
        <div class="footer">child footer</div>
      </div>
    </section>
  </div>
  <script>
    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";
      });
    });
  </script>
</body>

</html>
  • My current solution, which is workaround, I am manually setting scroll top position for content div to 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;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML + CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <section class="header">This is header</section>
    <section class="menu">This is menu</section>
    <section class="content">
      <div class="data">
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
      </div>
      <div class="child">
        <div class="head">child head</div>
        <div class="body">
          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.
        </div>
        <div class="footer">child footer</div>
      </div>
    </section>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    Try to change your position: absolute to position: sticky

    Here is your updated .child class:

    .child {
  position: sticky;
  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%;
}
    Login or Signup to reply.
  2. 0

    Change the .child‘s position to sticky and add bottom and left to stick it to the place you want:

    .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: sticky;
  top: 0;
  bottom: 0;
  left: 60%;
  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;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML + CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <section class="header">This is header</section>
    <section class="menu">This is menu</section>
    <section class="content">
      <div class="data">
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
        <button class="btn">showPanel</button>
      </div>
      <div class="child">
        <div class="head">child head</div>
        <div class="body">
          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.
        </div>
        <div class="footer">child footer</div>
      </div>
    </section>
  </div>
  <script>
    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";
      });
    });
  </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search