Блог

Главная - Вопросы по программированию - элемент отображения вне сетки в фиксированном положении

элемент отображения вне сетки в фиксированном положении

#html #css #css-position #css-grid

Вопрос:

моя страница содержит макет сетки. Мне нужно отобразить непостоянный элемент (элемент согласия на использование файлов cookie)
, который я разместил вне потока документов, используя position: absolute , чтобы не влиять на макет сетки. Мне нужен каждый бит пространства, поэтому я не хочу выделять дополнительное пространство для временного элемента, добавляя дополнительную строку
Как я могу зафиксировать начальное положение элемента даже при изменении ширины и высоты страницы ?

     .cookie-consent {
      
        background: red;
        width: 200px;
        height: 100px;
       
         position: absolute;
      
         bottom: 30px;
         right: 150px;
   
        z-index: 20;
      }


 
 :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 {
  
    background: red;
    width: 200px;
    height: 100px;
    /* transform: translateX(-80%); */
    /* /* margin-top: 50%; */
    /* border-radius: var(--main-radius); */
    /* margin-top: 30%; */
    /* margin-left: 50%;    */
    /* top: 300px;
    left: 30px;
     bottom: 100px; */

     position: absolute;
  
     bottom: 30px;
     right: 150px;
    
   /* top: 5; */
  /* right: 20; */
  /* left: 2;  */
  /* bottom: 20; */

    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">
    </div>
    <div class="container">
      <nav>Navbar</nav>
      <div id="component1">component1</div>
      <div id="component2">component2</div>
    
      <footer>Footer</footer>
    </div>
    
  </body>
</html>

Комментарии:

1. Ответы решили вашу проблему?

Ответ №1:

Используйте percentages вместо pixels in bottom и right свойство .cookie-consent класса. Я также добавил overflow: hidden; в body селектор.

Кроме того, подумайте о том, чтобы установить width и height (красный div) не жестко. Так должно быть лучше 😉 Я надеюсь, что Вы будете довольны . С наилучшими пожеланиями !

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

body {
  overflow: hidden;
}

.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 {
  background: red;
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 5%;
  right: 9%;
  z-index: 20;
} 
 <!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">
  </div>
  <div class="container">
    <nav>Navbar</nav>
    <div id="component1">component1</div>
    <div id="component2">component2</div>

    <footer>Footer</footer>
  </div>

</body>

</html>
Метки: