如何使用 css-grid 将元素放置在现有容器的顶部答案

【问题标题】：how to place an element on top of existing container using css-grid如何使用 css-grid 将元素放置在现有容器的顶部
【发布时间】：2021-10-16 09:11:58
【问题描述】：

我有一个带有网格容器的页面我想添加一个父元素（cookie 同意元素）在组件二的按钮和页脚之间就像在添加的屏幕截图中一样不受网格布局影响

考虑到这个类似的问题和答案 Moving element outside of grid system

建议使用position: absolute

  .cookie-consent {
    position: absolute;
    background: red;
    width: 300px;
    height: 200px;
    /* top: 300px;
    left: 30px;
     bottom: 100px; */
    
    z-index: 20;
  }

有没有更好的方法来放置 div 不使用反复试验top、left、right 参数直到达到所需位置？

:root {
   
    padding-left: 10%;
    padding-right: 10%;
  }
  

  .container {
    display: grid;
    height: 100vh;
    margin: auto;
    max-width: 80%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
    grid-template-areas:
      "nav nav nav nav"
      "component1 component1 component1 component1"
      "component2 component2 component2 component2"
      "footer footer footer footer";
    grid-gap: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
  
    text-align: center;
  }
  


  nav {
    text-align: center;
    background: #a7ffeb;
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  


  
  #component1 {
    background: #6fffd2;
    grid-area: component1;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  #component2 {
    background: #64ffda;
    grid-area: component2;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  




  
  footer {
    background: #1de9b6;
    grid-area: footer;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  .cookie-consent {
    position: absolute;
    background: red;
    width: 100px;
    height: 80px;
    /* top: 300px;
    left: 30px;
     bottom: 100px; */
    
    z-index: 20;
  }

  /* place the element cookie on top of the gird layout */
  /*  */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- add style css to page -->
    <link rel="stylesheet" href="./style.css" />

    <title>Document</title>
  </head>
  <body>
    <div class="cookie-consent">cookies</div>
    <div class="container">
      <nav>Navbar</nav>
      <div id="component1">component1</div>
      <div id="component2">component2</div>
    
      <footer>Footer</footer>
    </div>
    
  </body>
</html>

【问题讨论】：

如果您有滚动应用程序，请使用position: fixed / sticky。在全屏应用程序中，您可以在 component2 和 footer 之间使用grid-template-rows。
您希望将其放置在哪里 - 例如在视口顶部但水平居中或...？
在截图红方位置
如果有帮助，请为下面的答案投票。

标签： html css css-grid z-index

【解决方案1】：

首先确保cookie consent element样式与容器类元素内联，确保所有内容都在一个相似的容器中：添加容器元素后，您的HTML文件应如下所示：

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- add style css to page -->
     <link rel="stylesheet" href="./style.css" />

     <title>Document</title>
  </head>
  <body>
    <div class="main-container">
      <div class="cookie-consent">cookies</div>
      <div class="container">
        <nav>Navbar</nav>
        <div id="component1">component1</div>
        <div id="component2">component2</div>
        <footer>Footer</footer>
     </div>
   </div>

  </body>
</html>

然后从 cookie consent element 上的 CSS 中删除绝对位置，以确保您保持一致的流程。移除定位后，您的cookie consent element 样式应如下所示：

.cookie-consent {
   background: red;
   width: 100px;
   height: 80px;
   margin: auto;
   z-index: 20;
}

这将有助于将元素移动到网格容器的顶部。

【讨论】：