3

Верстаю макет с Фигмы. Наверстал

/* Обнуление */
*,
*::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: 400;
    font-family: Poppins;
}


.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;
}


/* =========================================================================== */

.page {
}
.page__main-block {
}
.main-block {
}
.main-block__container {
}
.main-block__logo {
}
.main-block__body {
}

.main-block__smalltitle{
    height: 21px;
    margin-left: 166px;
    /*right: 83.77%;*/
    /*top: calc(50% - 21px/2 - 195.5px);*/
    margin-top: 130.96px;
    width: 100px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */


    /*color: #FFFFFF;*/
    z-index: 10;
}

.main-block__title {
    margin-left: 166px;
    width: 616px;
    margin-top: 22px;
    /*bottom: 35.68%;*/
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 74px;
    /* or 123% */
    
    
    /*color: #FFFFFF;*/
    z-index: 5;
}
.main-block__text {
}
.main-block__items {
}
.main-block__link {
}
.main-block__link_yellow {
}
.main-block__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}

/* ============================================================================ */

.main-block__logo_white_triangle {
    width: 42px;
    height: 35px;
    left: 164px;
    top: 27.27px;
    
    background: #FFFFFF;
    /*transform: matrix(1, 0, 0, -1, 0, 0);*/
}
.main-block__logo_yellow_triangle {
    width: 29.21px;
    height: 24.35px;
    left: 176.78px;
    top: 27.27px;
    
    background: #F6F6F6
}

.main-block__logo_name {
    width: 179.23px;
    height: 33.05px;
    margin-left: 230.2px;
    margin-top: 23px;
    
    background: #FFFFFF;
    z-index: 15;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">    
    <title>Webovio</title>
</head>
<body>
    <div class="wrapper">
        <main class="page">
            <div class="page__main-block main-block">
                <div class="main-block__container">
                    <div class="main-block__header">
                        <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
                        <img  src="img/header/logo/webovio.png" class="main-block__logo_name" alt="logoname">
                        <img  src="img/header/hamburger.png" class="main-block__logo_hamburger_icon" alt="logoname">                       
                    </div>
                    <div class="main-block__body">
                        <div class="main-block__smalltitle">A place where</div>
                        <h1 class="main-block__title">A creative agency for redemptive brands</h1>
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                          </div>
                        <div class="main-block__items">
                            <a href="" class="main-block__link main-block__link_yellow">  Get in touch</a>
                        </div>
                    </div>    
                </div>
                <div class="main-block__image _ibg">
                    <img src="img/mainblock/mainimage.png" alt="cover">
                </div>
            </div>
        </main>
    </div>    
</body>
</html>

В результате отображается следующая картинка

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

в режиме инструментов разработчика. А вне режима вообще отображает

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

Подскажите как добиться отображения текста как на макете.

2 ответа 2

3
+250

Ну что ж давайте будём разбираться почему так происходит. У вас есть один блок секции .main-block у него есть контент .main-block__container и есть фоновое изображение(точнее изображение, которое размещается абсолютом поверх страницы).

Высота сверстанного контента в данный момент равна 463px.

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

Далее если вы сожмёте екран до высоты меньше чем 463px разумеется контент не поместиться на страницу и появиться скролл, но в данный момент ваше изображение размещено как бы на всю высоту и ширину страницы! не на всю высоту и ширину блока .main-block. Поетому происходит такая картина:

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

Для того, чтобы исправить такое нужно:

  1. Разместить картинку относительно блока(секции) .main-block
  2. Поместить картинку ниже чем контент(наполнение) блока .main-block__container для етого нужно задать z-index у .main-block__image меньше чем у контента.

Приведу вариант решения проблемы ниже:

/* Обнуление */
*,
*::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: 400;
   font-family: Poppins;
}

.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;
}

/* =========================================================================== */

.page {
}
.page__main-block {
}

.main-block {
   position: relative;
   /* делаем блок на фулскрин */
   height: 100vh;
   min-height: 600px;
}

.main-block__container {
   /* ставим z-index для контента выше чем z-index у фонового изображения */
   position: relative;
   z-index: 2;
}

.main-block__logo {
}
.main-block__body {
}

.main-block__smalltitle {
   height: 21px;
   margin-left: 166px;
   right: 83.77%;
   top: calc(50% - 21px / 2 - 195.5px);
   margin-top: 130.96px;
   width: 100px;

   font-family: "Poppins";
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
   /* identical to box height */

   color: #ffffff;
   z-index: 10;
}

.main-block__title {
   margin-left: 166px;
   width: 616px;
   margin-top: 22px;
   bottom: 35.68%;

   font-family: "Poppins";
   font-style: normal;
   font-weight: 700;
   font-size: 60px;
   line-height: 74px;
   /* or 123% */

   color: #ffffff;
   z-index: 5;
}
.main-block__text {
}
.main-block__items {
}
.main-block__link {
}
.main-block__link_yellow {
}

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

/* ============================================================================ */

.main-block__logo_white_triangle {
   width: 42px;
   height: 35px;
   left: 164px;
   top: 27.27px;

   background: #ffffff;
   /* transform: matrix(1, 0, 0, -1, 0, 0); */
}
.main-block__logo_yellow_triangle {
   width: 29.21px;
   height: 24.35px;
   left: 176.78px;
   top: 27.27px;

   background: #f6f6f6;
}

.main-block__logo_name {
   width: 179.23px;
   height: 33.05px;
   margin-left: 230.2px;
   margin-top: 23px;

   background: #ffffff;
   z-index: 15;
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>Webovio</title>
   </head>
   <body>
      <div class="wrapper">
         <main class="page">
            <div class="page__main-block main-block">
               <div class="main-block__container">
                  <div class="main-block__header">
                     <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
                     <img src="img/header/logo/webovio.png" class="main-block__logo_name" alt="logoname">
                     <img src="img/header/hamburger.png" class="main-block__logo_hamburger_icon" alt="logoname">
                  </div>
                  <div class="main-block__body">
                     <div class="main-block__smalltitle">A place where</div>
                     <h1 class="main-block__title">A creative agency for redemptive brands</h1>
                     <div class="main-block__text">
                        Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                     </div>
                     <div class="main-block__items">
                        <a href="" class="main-block__link main-block__link_yellow"> Get in touch</a>
                     </div>
                  </div>
               </div>
               <div class="main-block__image _ibg">
                  <img src="img/mainblock/mainimage.png" alt="cover">
               </div>
            </div>
         </main>
      </div>
   </body>
</html>

Результат исполнения(недоверстанного, но правильного варианта):

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

0

Так как у Вас весь контент блока обернут в

<div class="main-block__container">

а следом идёт

 <div class="main-block__image _ibg">
    <img src="img/mainblock/mainimage.png" alt="cover">
 </div> 

Как я понял, вы планируете что фоновая картинка будет меняться из PHP админки например, то нужно что бы контент перекрыл background image для этого задайте:

.main-block__container {
    position: relative;
     z-index: 5;
}

Получится: введите сюда описание изображения

У .main-block__title, .main-block__logo_name, .main-block__smalltitle, .main-block__image - z-index можно убрать

Ваш ответ

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

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