JQuery, как добавить на то же место

Question

так что в проекте мне нужно добавить несколько элементов с помощью jquery.Я использую функцию .append(), она работает нормально, но мне действительно нужно добавлять элементы в одно и то же место каждый раз, а не один за другим.

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

извините за плохой английский.

Answer 1

Как уже упоминалось @darklightcode, вы должны решить эту проблему с помощью CSS.Добавьте position: relative правило к родительскому элементу.Затем добавьте position: absolute к дочерним элементам, к которым вы добавляете.Самый простой способ - дать каждому элементу, который вы добавляете, тот же класс, который имеет это правило: position: absolute.

Вам не нужно указывать z-index для каждого добавленного элемента, потому что по умолчанию последнее добавленное будет видно поверх всех остальных элементов.

Это может выглядеть так: HTML:

<div class="parent">
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="child red"></div>
</div>

CSS:

.parent {
   position: relative;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.red {
  background: red;
}