1
0

Проблема: https://imgur.com/a/2kYi3s9

HTML

<section class="optimization">
     <div class="container">
         <h2 class="optimization_header">
            Что такое оптимизация и зачем она нужна?
         </h2>

         <div class="optimization_text">

            На просторах интернета несчетное количество действующих и даже заброшенных сайтов. Большинство из них совпадает не только по категориям, но и по содержанию. 
            <br><br>
            Представьте себе тысячи сайтов, на которых тем или иным образом предоставляется одна и та же информация или продается одна и та же услуга. И попасть на эти сайты можно лишь по тематическим запросам в поисковых системах. 
            <br><br>
            Но как вам быть, если ваш сайт похож на сотню или тысячу таких же, а на одной странице гугла или яндекса всего 10 позиций? Как привести посетителей страницы своего ресурса? Именно для этого и нужна оптимизация – для вывода вашего сайта на первую страницу поиска!
            <br><br> 
            <span>Мы научим вас, как сделать ваш сайт привлекательным для поисковых систем и посоветуем, как вывести его на первые страницы, обходя всех конкурентов.</span>
         </div>
        
         <img src="img/background/woman.jpg" alt="link" class="optimization_img">


     </div>
     
     
     
          </section>

STYLE.CSS

.optimization {
   
    min-height: 550px;
    padding: 102px 0 107px 0;
    
    
}

.optimization .optimization_header {
    margin-left: 391px;
    color: #299cbd;
    font-family: "Roboto - Black";
    font-size: 29px;
    font-weight: 400;
    text-transform: uppercase;;
    
}

.optimization .optimization_text {
   margin-top: 25px;
    margin-left: 391px;
    color: #4a4a4a;
    font-family: Roboto;
    font-size: 17px;
    font-weight: 300;
    
}

.optimization .optimization_text span {
    font-family: "Roboto - Bold";
    font-weight: 700;
    
}

.optimization .optimization_img 
{   
    position: absolute;
     top: -54px;
     left: -240px;
     z-index: -1;
     
}


Yaroslav Trusov
3 years ago






у вас позиция картинки прописана -54, -240 - видимо картинка за пределы видимой области выходит так как ее размер меньше чем 54x240

пропишите положительные значения - убелитесь что картинка отображается, а дальше подбирайте значения какие нужны для этого блока

также можно использовать свойство background-image для блока чтобы задать фон, вместо отображения картинки со свойствами absolute и z-index

Кирилл Лавров
3 years ago

У меня такаяже проблемма. Картинка проваливалась за блок optimization

Решил проблемму пока так:

.optimization {
    position: absolute;
    z-index: -2;
    min-height: 550px;
    padding: 102px 0 107px 0;
}

Андрей
2 years ago

2 ответов