Как добавить кнопку над изображением

Question

Надеюсь, вы все в безопасности в эти странные времена!

Как разместить кнопку над изображением (см. здесь )?

Я использую Visual Studio, Jekyll и Github.

Я пытался скопировать и вставить эту точную кодировку в Visual Studio, но оказалось, что this .

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

Я надеялся спросить вас, ребята, потому что я полностью потерян.

Большое спасибо всем!

- Полный новичок ie в кодировке

Answer 1

Можете ли вы опубликовать свой код в фрагменте кода или скрипте? Ответ Джоэла должен помочь, чтобы в вашем коде что-то пошло не так. Убедитесь, что и изображение, и элементы кнопки находятся в контейнере div и правильные свойства позиции обоих элементов - position: относительный (для контейнера div) position: absolute (для кнопки) Затем вы можете поиграть с позицией кнопка со свойствами top / bottom и left / right.

Answer 2

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

.container {
  position: relative;
  width: 50vw;
  height: 25vh;
  background-color: #999999;
  border: 3px dotted black;
}

.btn-group {
  position: absolute; 
  bottom: 10%;
  left: 5%;
  border: 2px dotted red;
}

<div class="container">
<div class="btn-group">
  <button id="btn1">Request Proposal</button>
  <button id="btn2">Learn More</button>
</div>
</div>