文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用css-grid将元素放在现有容器的顶部

问如何使用css-grid将元素放在现有容器的顶部
EN

Stack Overflow用户

提问于 2021-10-16 09:11:58

回答 1查看 181关注 0票数 0

我有一个带有网格容器的页面，我想在组件2的按钮和页脚之间添加一个父元素(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>

html

css

css-grid

z-index

回答 1

Stack Overflow用户

发布于 2021-10-16 11:22:23

首先，为了确保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;
}

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69594212

复制

相似问题

问如何使用css-grid将元素放在现有容器的顶部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css-grid将元素放在现有容器的顶部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css-grid将元素放在现有容器的顶部
EN