Невозможно переместить изображение в HTML

Question

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

.container_767 {
  position: relative;
  text-align: center;
  color: #fff;
}

.imagetext_767 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image_767 {
  position: relative;
  width: 45%;
  height: 45%;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

<div class="container_767">
  <img class="image_767" src="../images/aircraft/CS767_TN.JPG">
  <div class="imagetext_767">Captain Sim 767</div>
</div>

Answer 1

Если вы хотите использовать свойства CSS, такие как left, right, top и bottom, элемент должен иметь свойство position, установленное на значение absolute . Затем вы сможете поместить его в его первого родителя, для которого свойство position установлено на значение relative. Если нет родительского элемента с этим значением свойства, позиция устанавливается в соответствии с левым верхним углом окна.

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

Посмотрите на фрагмент кода, чтобы увидеть пример.

.container_767 {
  position: relative;
  text-align: center;
  background: aliceblue;
  height: 500px;
}

.imagetext_767 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image_767 {
  position: absolute;
  width: 45%;
  height: 45%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container_767">
  <img class="image_767" src="../images/aircraft/CS767_TN.JPG">
  <div class="imagetext_767">Captain Sim 767</div>
</div>

Answer 2

Измените position: absolute; на position: relative; в .imagetext_767

.imagetext_767 {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}