Почему кнопка позиционируется в нижнем правом углу?

Question

[neitoo]

Почему кнопка позиционируется именно в нижнем правом углу картинки, как её сделать под картинкой например?

.project-image {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
}

.project-image img {
  width: 448px;
  height: 256px;
  object-fit: cover;
}

.button {
  position: static;
  margin: 0;
  padding: 8px 24px;
  display: inline-block;
  vertical-align: baseline;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  color: #0b0c23;
  background-color: #f9dd79;
  box-shadow: 0 4px 16px rgba(249, 221, 121, 0.4);
  border-radius: 24px;
  transition: background-color 100ms, box-shadow 100ms;
}

Comments

[Ankhena]

Начнем субботу с игры "Угадай разметку".
Ну, предположим я сделаю первый ход
https://jsfiddle.net/q7rb1fy3/

Не получилось, кнопка не попала в правый нижний угол картинки, а попала рядом с ним.

Что делать:
1. Сделать песочницу на jsfiddle.net с видимой проблемой.

2. Объясните какого результата вы хотите добиться вообще. Потому что просто кнопка встанет вниз, если вы зададите ей display block.
Но ведь в зависимости от задачи и решения будут разными.

3. Перестать писать свойства, смысл которых вы не понимаете и зачем их пишете тоже не понимаете.
Т.е. сначала справочник, а потом пишем.
Например, зачем вы указываете кнопке position: static? А до этого она кем была?

position: relative;
  top: 0;
  left: 0;

тоже шикарная запись. Зачем вы это пишете?

[neitoo]

Я только начинаю верстать, по этому бред получился
1. На счет песочницы не знал, теперь буду иметь в виду.
2. Исправил, теперь отображается как надо.
В целом учту свои ошибки, спасибо за помощь

[Ankhena]

neitoo, на всякий случай: когда вы тут пишете комментарий ни к кому конкретно не обращаясь, то никто и не узнает об этом, если только специально не зайдет.
Удобно использовать кнопочку "ответить"

Answer 1

[Михаим Фролов]

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-image{
display:flex; 
  width: 448px;
  height: 256px;
flex-direction: column;
}