Использование CSS Grid с позицией / преобразованием

Я пытаюсь объединить сетку CSS с позицией, чтобы моя страница эффективно настраивалась под разные размеры экрана. Я думаю, что нужно создать одну сетку для мобильных устройств и одну для настольных компьютеров с использованием @media(screen-width).

Я бы подумал, что блоки сетки будут управляться сетками, а содержимое блоков сетки будет управляться позицией.

Теперь я понимаю, что сетка создаст воображаемый прямоугольник на основе столбцов и строк, и когда я использую позицию, она будет фиксироваться в одном углу блока сетки.

Вопрос

01 Где мое непонимание этой концепции?

02 Есть ли лучшие способы сделать это?

Мой код:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Grid</title>
  <style>
    .wrapper_main {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-gap: 1em;
      justify-items: stretch;
      align-items: stretch;
    }
    
    .box0 {
      grid-column: 1/6;
      grid-row: 1;
      border: 1px solid #333;
    }
    
    .box1 {
      grid-column: 1/6;
      grid-row: 2/6;
      border: 1px solid #333;
    }
    
    .seconds01 {
      position: fixed;
      right: 20px;
      top: 50px;
    }
    
    .seconds05 {
      position: fixed;
      right: 100px;
      top: 50px;
    }
  </style>
</head>

<body>
  <div class="wrapper_main">
    <div class="box box0">Box 0</div>
    <div class="box box1">
      <a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
      <a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
    </div>
  </div>
</body>

</html>

Что я получаю. введите здесь описание изображения

Что я хочу. введите здесь описание изображения


html css css-grid
person Deon    schedule 01.11.2018    source источник
comment
какая разница между обоими? я не понял   -  person Bhargav Chudasama    schedule 01.11.2018
comment
Могу я спросить вас, почему вы хотите, чтобы они были в липкой позиции, почему бы вам не попробовать абсолютную позицию?   -  person Viira    schedule 01.11.2018
comment
Привет @BhargavChudasama, я все еще изучаю, где можно использовать сетку и где можно использовать позицию   -  person Deon    schedule 01.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

Помните, когда вы размещаете элемент. Когда вы применяете position:fixed;, он не будет уважать родительские контейнеры, он будет строго придерживаться представления области просмотра.

Возможно, вы можете попробовать position:absolute; для дочернего элемента и передать position:relative; его родительскому контейнеру, чтобы он был в своем родительском контейнере.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Grid</title>
  <style>
  .wrapper_main{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-auto-rows:minmax(100px, auto);
    grid-gap:1em;
    justify-items:stretch;
    align-items:stretch;
  }
  .box0{
    grid-column:1/6;
    grid-row:1;
    border:1px solid #333;
  }

  .box1{
    grid-column:1/6;
    grid-row:2/6;
    border:1px solid #333;
    position:relative;
  }
  .seconds01{
       position:absolute;
       right:20px;
       top:50px;
  }

  .seconds05{
     position:absolute;
       right:100px;
       top:50px;
  }
  </style>
</head>
<body>
  <div class="wrapper_main">
    <div class="box box0">Box 0</div>
    <div class="box box1">
        <a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
        <a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
    </div>
  </div>
</body>
</html>

person Viira    schedule 01.11.2018
comment
Привет, Виира, спасибо, что показал мне это. В настоящее время я жонглирую работой и изучаю html, css и java скрипт. Я перечитаю это. Думаю, я неправильно понял position: fixed, position: absolute; положение: относительное; - person Deon; 01.11.2018