Как сделать коробки в коробке в html

Question

body,
html {
  background-color: blue;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  height: 50%;
  width: 50%;
}

.child {
  position: absolute;
  background: grey;
  height: 10%;
  width: 10%;
}

<div class="container">
  <div class="box">
    <div class="box child"></div>
    <div class="box child"></div>
    <div class="box child"></div>
  </div>
</div>

, поэтому я пытался сделать ящики (дочерний блок) в ящике (ящике), но, хотя я скопировал и вставил кучу детей-ящиков, это сделал не позволяйте мне создавать больше одного.

Я впервые делаю html, поэтому, если бы вы могли объяснить, как вы объясняете ребенку 8 лет, я был бы признателен.

Answer 1

position:absolute ваша проблема здесь. Это помещает ящики на 0,0 (вверху слева) внутри контейнера, поэтому каждый ящик (без указания left, right, top или bottom будет начинаться с этой позиции. Т. Е. Все ваши ящики разбиты Избегайте использования абсолютного положения, где вы можете, и позволяйте контенту падать естественным образом, а затем сдвигайте его с другими значениями, такими как отступы и поля.

Answer 2

Попробуйте:

<style>
body,
html {
  background-color: blue;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  height: 50%;
  width: 50%;
}

.child {
  position: relative;
  background: grey;
  height: 10%;
  width: 10%;
  border:#FF0000 1px solid;
}
</style>
<div class="container">
  <div class="box">
    <div class="box child">1</div>
    <div class="box child">2</div>
    <div class="box child">3</div>
  </div>
</div>

Я изменил дочернюю позицию с абсолютной на относительную. Поскольку абсолютная позиция помещает каждую коробку друг на друга, и, следовательно, вы не можете просмотреть все коробки. Кроме того, я поместил «границу», чтобы их было легко заметить.

Answer 3

Они все там, ваши дочерние ящики, но они сложены друг на друга и занимают одно и то же место.

.child{
  // position:absolute; <-- take this out
  position:relative; // add this one
  background: grey;
  height: 10%;
  width: 10%;
}

Позиция absolute означает, что она ни с чем не взаимодействует остальное в отношении космоса.

Позиция relative означает, что дочерние блоки будут расположены относительно друг друга.

Также: class имена разделены пробелами в HTML, поэтому ваши внутренние блоки имеют 2 класса каждый, «коробка» и «ребенок». Это нормально, у вас может быть много классов, но css, который вы сделали для класса бокса, будет применяться как к внешнему блоку, так и к внутренним боксам, что, я не думаю, было вашим намерением.

Answer 4

Это простой способ сделать это, чтобы добавить поле внутри каждого поля с меньшей шириной и высотой. Надеюсь, это поможет:)

#first {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#first #second {
  width: 50%;
  height: 50%;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#second #third {
  width: 40%;
  height: 40%;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#third #forth {
  width: 30%;
  height: 30%;
  background: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="first">
  <div id="second">
    <div id="third">
      <div id="forth">
      </div>
    </div>
   </div>
</div>