position: absolute; и position: relative; для мобильной версии сайта

[marizza40]

Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. 

Есть не анимированный слайдер

<div class="slider">
    
    <div class="slider_site">
          <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/>
       </div>
       <div class="slider_line">
          </div>
        <div class="txt_left">
            <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1>
            <div class="button"> 
    <a href="#" class="button_a">Подробнее</a>   
            </div><!--/.button-->
        </div>
    <div class="slider_site">
          <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/>
       </div>
       <div class="slider_line_two">
          </div>
        <div class="txt_left">
            <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1>
            <div class="button"> 
    <a href="#" class="button_a_one">Подробнее</a>   
            </div><!--/.button-->
        </div>
    
</div>

Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? 

CSS:

/*slider*/
.slider{
    display: flex;
    font-family: 'Roboto', sans-serif;
}
.slider_h{
    position: absolute;
    color: #fff;
    top: 32%;
    left: 7%;
    font-size: 86px;
    line-height: 85px;
    text-align: right;
}
.slider_h_two{
    position: absolute;
    color: #fff;
    top: 32%;
    left: 52%;
    font-size: 86px;
    line-height: 85px;
}
.slider_site{
    width: 100%;
}
.img_slider{
    width: 100%;
    position: relative;
}
.slider_line{
    width: 170px;
    height: 3px;
    background: #0192dc;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
    top: 32%;
    left: 42%;
}
.slider_line_two{
    width: 170px;
    height: 3px;
    background: #0192dc;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
    top: 32%;
    left: 57%;
}

/*button*/
.button_a{
    vertical-align: top;
    padding: 8px 30px;
    border: 2px solid #0092db;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin: 20px auto;
    transition: 0.1s linear;
    position: absolute;
    top: 59%;
    left: 39%;
}

.button_a:hover{
    color: #0092db;
    text-decoration: none;
}

.button_a_one{
    vertical-align: top;
    padding: 8px 30px;
    border: 2px solid #0092db;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin: 20px auto;
    transition: 0.1s linear;
    position: absolute;
    top: 59%;
    left: 52%;
}
.button_a_one:hover{
    color: #0092db;
    text-decoration: none;
}

 

[npofopr]

Делайте пример в песочнице. 

Вариантов масса, от удаления текста, до размещения его по центру, под слайдером и т.п. 

[marizza40]

2 минуты назад, npofopr сказал:

Делайте пример в песочнице. 

Вариантов масса, от удаления текста, до размещения его по центру, под слайдером и т.п. 

Сейчас как раз делаю в песочнице. Мне необходимо разместить текст + линия + кнопка именно на картинке. 

[AlexZaw]

Код не смотрел, но вам нужно либо прописать тег viewport, либо познакомиться с медиа запросами