0

Смотрел Адаптивная верстка с 1:25:00 по 1:36:00. Есть блок кода с этого видео

"use strict"
/* Обнуление */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

html,
body {
  height: 100%;
  line-height: 1;
  background: #fafafa;
  font-size: 14px;
  color: #252b42;
  font-weight: 500;
  font-family: Montserrat;
}

.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 1046px;
  padding: 0px 15px;
  margin: 0px auto;
  box-sizing: content-box;
}

._ibg {
  position: relative;
}

._ibg img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}


/* ------------------------------------------------------------------------- */

.header {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 50;
}

.header__container {
  display: flex;
  min-height: 104px;
  align-items: center;
}

@media (max-width: 479px) {
  .header__container {
    min-height: 70px;
  }
}

.header__logo {
  font-size: 24px;
  font-weight: 700;
  color: inherit;
}

.header__menu {
  margin: 0px 0px 0px 133px;
}

.menu {
  padding: 5px 0px;
}

.menu__list {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 992px) {
  .header__menu {
    margin: 0px 0px 0px 80px;
  }
}

@media (max-width: 767px) {
  .header__menu {
    margin: 0px 0px 0px 40px;
  }
}

@media (max-width: 479px) {
  .header__menu {
    margin: 0px 0px 0px 20px;
  }
}

.menu__item:not(:last-child) {
  margin: 0px 21px 0px 0px;
}

.menu__link {
  color: #737373;
  font-weight: 600;
  line-height: calc(24 / 14*100%);
}

@media (max-width: 479px) {
  .menu__link {
    font-size: 18px;
  }
}


/* -------------page----------------------------------------------------------------------- */

.page {
  flex: 1 1 auto;
}


/* -------------footer---------------------------------------------------------------------- */

.footer {}


/* --------------main-block---------------------------------------------------------------------- */

.main-block {
  position: relative;
}

.main-block__container {}

.main-block__body {
  padding: 184px 0px 191px 0px;
  position: relative;
  z-index: 2;
  max-width: 400px;
}

@media (max-width: 992px) {
  .main-block__body {
    padding: 120px 0 191px 0px;
  }
}

@media (max-width: 479px) {
  .main-block__body {
    padding: 115px 0 160px 0px;
  }
}

.main-block__body>*:not(:last-child) {
  margin: 0px 0px 35px 0px;
}

.main-block__title {
  font-size: 58px;
  line-height: calc(80 / 58 * 100%);
  letter-spacing: 0.2px;
  font-weight: 800;
}

@media (max-width: 479px) {
  .main-block__title {
    font-size: 42px;
  }
}

.main-block__text {
  color: #737373;
  font-size: 20px;
  line-height: 150%;
}

@media (max-width: 479px) {
  .main-block__text {
    color: #585757;
  }
}

.main-block__buttons {
  display: flex;
  flex-wrap: wrap;
  margin: -10px 0px;
}

.main-block__button {
  border-radius: 37px;
  display: flex;
  min-height: 48px;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.2px;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
  padding: 0px 36px;
  margin: 10px 0px;
}

@media (max-width: 479px) {
  .main-block__button {
    flex: 1 1 100%;
  }
}

@media (min-width: 479px) {
  .main-block__button:not(:last-child) {
    margin-right: 10px;
  }
}

.main-block__button_orange {
  background: #ff7b47;
  color: #fff;
}

.main-block__button_border {
  color: #0d5c63;
  border: 1px solid #0d5c63;
}

.main-block__image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@media (max-width: 1300px) {
  .main-block__image img {
    object-position: right;
  }
}

@media (max-width: 992px) {
  .main-block__image {
    opacity: 0.5;
  }
}
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/style.css">
  <title>Relvise</title>
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <div class="header__container _container">
        <a href="" class="header__logo">
                    Relvise
                </a>
        <nav class="header__menu menu">
          <ul class="menu__list">
            <li class="menu__item">
              <a href="" class="menu__link">
                                Home
                            </a>
            </li>
            <li class="menu__item">
              <a href="" class="menu__link">
                                Product
                            </a>
            </li>
            <li class="menu__item">
              <a href="" class="menu__link">
                                Pricing
                            </a>
            </li>
            <li class="menu__item">
              <a href="" class="menu__link">
                                Contact
                            </a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main class="page">
      <div class="page__main-block main-block">
        <div class="main-block__container _container">
          <div class="main-block__body">
            <h1 class="main-block__title">Finance and Consultancy Solution</h1>
            <div class="main-block__text">
              We know how large objects will act, but things on a small scale.
            </div>
            <div class="main-block__buttons">
              <a href="" class="main-block__button main-block__button_orange">Get Quote Now</a>
              <a href="" class="main-block__button main-block__button_border">Learn More</a>
            </div>
          </div>
        </div>
        <div class="main-block__image _ibg">
          <img src="https://i.stack.imgur.com/XC5Ct.jpg" alt="cover">
        </div>
      </div>
    </main>
  </div>
  <script src="js/script.js"></script>
</body>

</html>

Прилагаю фоновый рисунок

введите сюда описание изображения

Я рассматриваю следующий участок кода, приведенный на Последовательность div-ов

Согласно ему рисунок

<div class="main-block__image _ibg">
                    <img src="https://i.stack.imgur.com/XC5Ct.jpg" alt="cover">
</div>

идет после блока main-block__container, а на странице рисунок является фоном этого блока. Объясните почему так происходит (каким образом стили позволяют сделать рисунок фоновым и приведите порядок их применения).

1 ответ 1

0

Схема такая: Разметка

  <div class="page__main-block main-block"> // -- position relative
    <div class="main-block__container _container">
     ....
    </div>
    <div class="main-block__image _ibg"> // -- position absolute
      <img src="https://i.stack.imgur.com/XC5Ct.jpg" alt="cover">
    </div>
  </div>

Получается, при absolute блок <div class="main-block__image _ibg"> позиционируется внутри блока <div class="page__main-block main-block">. Его растянули по всей ширине и высоте:

 .main-block__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

Получается что изображение сейчас будет перекрывать текс, для этого блоку с классом .main-block__body сделали z-index: 2;. Чтобы текст стал выше на слой чем изображение.

Вот и все

4
  • а у меня была мысль, что на позиционирование блока <div class="main-block__image _ibg"> повлияло свойство object-fit: cover. Проясните пожалуйста правильную причину позиционирования. 7 июл 2022 в 23:56
  • см. свойство object-fit:cover в спецификаторе ._ibg img. Играет ли оно какую-то роль в позиционировании? 8 июл 2022 в 0:08
  • Я вам довольно подробно написал про позиционирование. Если все еще не понятно почитайте отдельно про позиционирование, вот ссылка. developer.mozilla.org/ru/docs/Web/CSS/position 8 июл 2022 в 7:13
  • object-fit -- не влияет на позиционирование. Вот что оно значит. Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины. Вот ссылка для изучения developer.mozilla.org/ru/docs/Web/CSS/object-fit 8 июл 2022 в 7:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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