1

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. Где я ошибся, подскажите?

1 ответ 1

1

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

3
  • Помогло, спасибо! А как это повлияло, можно поподробней?
    – Lirika
    29 авг 2020 в 16:42
  • 1
    Всё очень просто, позиция абсолютная не учитывает внутренние отступы))
    – noname2019
    29 авг 2020 в 16:47
  • То есть, при позиции абсолютной паддинг ничего не даст, писать маржин?
    – Lirika
    29 авг 2020 в 16:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.