Расположите элемент относительно его контейнера

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

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Абсолютное позиционирование позиционирует элемент относительно его ближайшего предка. Итак, поместите position: relative в контейнер, тогда для дочерних элементов top и left будут относиться к левому верхнему углу контейнера, пока дочерние элементы имеют position: absolute. Более подробная информация доступна в спецификация CSS 2.1.

Вы правы в том, что позиционирование CSS - это лучший способ. Вот краткий обзор:

position: relative разместит элемент относительно сам.. Другими словами, элементы размещаются в обычном потоке, затем он удаляется из обычного потока и смещается на любые значения, которые вы указали (вверху, справа, внизу, слева). Важно отметить, что, поскольку он удален из потока, другие элементы вокруг него не будут сдвигаться вместе с ним (вместо этого используйте отрицательные поля, если вы хотите такого поведения).

Однако вас, скорее всего, заинтересует position: absolute, который позиционирует элемент относительно контейнера. По умолчанию контейнером является окно браузера, но если на родительском элементе установлен position: relative или position: absolute, то он будет действовать как родительский для позиционирования координат своих дочерних элементов.

Показывать:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id = "container">
  <div id = "box">absolute</div>
</div>

В этом примере верхний левый угол #box будет на 100 пикселей вниз и 50 пикселей слева от верхнего левого угла #container. Если для #container не задан position: relative, координаты #box будут относиться к левому верхнему углу окна просмотра браузера.

Я знаю, что опаздываю, но надеюсь, что это поможет.

Ниже приведены значения свойства position.

• статический
• фиксированный
• относительный
• абсолютный

позиция: статическая

Это по умолчанию. Это означает, что элемент будет располагаться в обычном месте.

#myelem {
    position : static;
}

позиция: фиксированная

Это установит положение элемента относительно окна браузера (области просмотра). Элемент с фиксированным позиционированием останется на своем месте даже при прокрутке страницы.

(Идеально, если вам нужна кнопка прокрутки вверх в правом нижнем углу страницы).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

позиция: относительная

Чтобы разместить элемент в новом месте относительно его исходного положения.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

Приведенный выше CSS переместит элемент #myelem на 30 пикселей влево и на 30 пикселей от верха его фактического местоположения.

позиция: абсолютная

Если мы хотим, чтобы элемент располагался в точном месте на странице.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

Приведенный выше CSS разместит элемент #myelem в позиции 30 пикселей сверху и 300 пикселей слева на странице, и он будет прокручиваться вместе со страницей.

И наконец...

положение относительное + абсолютное

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

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Мы можем видеть на изображении выше, что элемент # div-2 расположен в верхнем правом углу внутри элемента #контейнер.

GitHub: вы можете найти HTML-код приведенного выше изображения здесь и CSS здесь.

Надеюсь, этот руководство поможет.

Если вам нужно сначала расположить элемент относительно содержащего его элемента, вам нужно добавить position: relativeк элементу контейнера. Дочерний элемент, который вы хотите расположить относительно родительского должен иметьposition: absolute. Абсолютное позиционирование работает так: это делается относительно первого относительно (или абсолютно) позиционированного родительского элемента. В случае, если есть родительский элемент с позиционированием нет относительно, элемент будет расположен относительно корневой элемент (непосредственно по отношению к элементу HTML).

Поэтому, если вы хотите разместить дочерний элемент в верхнем левом углу родительского контейнера, вам следует сделать следующее:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Вы получите большую пользу от чтения Эта статья. Надеюсь это поможет!