如何正确设置显示网格内的绝对元素？

问题描述 投票：0回答：1

我有下面的代码片段，我想要实现的是

.child
面板不应该显示在
.content
类的顶部，但是，
.child
设置在
.data
类的顶部。我不明白为什么会发生这种情况。

根据我的理解，

absolute
元素采用最近的
relative
元素的边界，在我的例子中是
.content
。我的 
.child
元素仍然从 
top
类中获取 
.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;
}

.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>
      </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>

html css grid css-position
1个回答
0
投票

你想要的是粘性而不是绝对（见代码中的注释）

.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;
  /* use a grid container */
  display: grid;
  grid-template-columns: 1fr 40%; /* the 40% width as the second column*/
  grid-template-rows: 100%; /* 100% to be able to use height: 100% later */
}

.child {
  /* sticky to the top */
  position: sticky;
  top: 0;
  /**/
  height: 100%; /* 100% of the parent height */
  background-color: aqua;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head" "body" "footer";
}

.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;
}

.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>
      </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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.