Как бы использовать абсолютные и относительные теги для позиционирования CSS

Question

Я хочу иметь вертикальную позицию по умолчанию для определенных элементов div, чтобы они находились прямо под элементом сверху.Но я хочу иметь возможность определить их горизонтальное положение.например, left: 30px, но top может быть переменной.Как мне это сделать?

Answer 1

Попробуйте это:

body {
  margin: 0;
  overflow-x: hidden; /*to avoid overflow because of 'left:30px' given to wrapper2*/
}
.wrapper1 {
  height: 50px;
  background: #000;
}
.wrapper2 {
  position: absolute;
  width: 100%;
  left: 30px;
}
.child1 {
  background: red;
  height: 30px;
}
.child2 {
  background: blue;
  height: 30px;
}

<div class="wrapper1"></div>
<div class="wrapper2">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Для увеличения относительного расстояния между wrappers вы можете использовать margin-top или bottom

Надеюсь, это поможет!