Не позиционируется элемент

Question

body {
  margin: 0;
}

div.header {
  width: 100%;
  max-width: 1680px;
  height: 100px;
}

div.logo {
  width: 184px;
  max-width: 184px;
  height: 61px;
  padding-top: 20px;
  padding-left: 164px;
  position: relative;
}

div.M_logo {
  font-family: 'Roboto', sans-serif;
  font-size: 45px;
  display: inline-block;
  position: absolute;
  left: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <title>Flat</title>
</head>

<body>
  <div class="header">
    <div class="logo">
      <img class="logo" src="assets/images/logo.png" alt="">
      <div class="M_logo">M</div>
    </div>
  </div>
</body>

</html>

Мне нужно, чтобы буква М наложилась на картинку, я указал для блока div.logo position: relative, чтобы букву можно было выровнять относительно этого блока. Для самой буквы я указал position: absolute. Но, буква всё равно позиционируется относительно body. Где я ошибся, подскажите?

Answer 1

Проблема в том что Вы делаете блоку с классом logo внутренние отступы, а для того что бы получить желаемый Вами эффект, нужно сделать внешние, попробуйте в классе logo заменить padding-top и padding-left на margin-top и margin-left

БЛОГ НА HUSL

Не позиционируется элемент

Ответы (1 шт):