Абсолютное позиционирование - наложение слоя на слой

@neoweb · Регистрация: 09.02.2016

Author24 — интернет-сервис помощи студентам

Привет.

Не могу никак понять, как корректно сверстать этот блок. Если поместить "лого" и "блок2" в слой слайдера, то перестают работать ссылки в "блоке2". Если правильно понял, то нужно задавать абсолютное позиционирование к слайдеру, "лого" и "блоку2, также понизить приоритет слайдера в z-index. Но никак не могу добиться корректной верстки.

Буду благодарен за наводку в решении проблемы.

@Resume · 09.02.2016, 20:40

мое видение проблемы:

HTML5

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<div class="slider">
<div class="container">
<div class="logo">ЛОГО</div>
<div class="text">КОНТЕЙНЕР</div>
<div class="block2">БЛОК2</div>
</div>
JQUERY СЛАЙДЕР
</div>
</body>
</html>

CSS

.slider{
height:200px;
width:30%;
background:rgb(220,237,253);
padding:15px 40px 0 15px;
text-align:center;
}
 
.container{
background:rgb(200,230,255);
height:75px;
width:100%;
padding:10px 15px 10px 10px;
margin-bottom:5px;
}
 
.text{
font-size:10px;
width:180px;
}
 
.logo,.text,.block2{
width:150px;
display:table-cell;
padding:20px 0;
}
 
.logo,.block2{
background:rgb(245,245,245);
}

@neoweb · 10.02.2016, 07:57 **[ТС]**

Внутри .slider выводится jquery слайдер. Поэтому поместив в него "блок2", не работают ссылки и некоторые элементы css.

Добавлено через 37 минут
Решил проблему.

HTML5

    <div class="main_header">
 
        <div class="bg_header">
           <div class="bg_header2">
            <div class="logo">
                logo            </div>
 
 
            <div class="contacts">
                <ul>
                   
                </ul>
            </div>
        </div>
        </div>
        <div class="slider_r">
 
 
 
        </div>
        <script>
            $(".slider_r").backstretch([
      "1.jpg",
      "2.jpg",
      ".jpg"
      ], {
                fade: 750,
                duration: 4000
            });
        </script>
 
 
 
    </div>

HTML5

.bg_header {
    width: 100%;
    background: url(../images/bg-header.png) repeat-x center top;
    height: 273px;
    position: absolute;
    z-index: 2;
    text-align: center;
    display: block;
}
.bg_header2{
    width: 1000px;
    margin: 0 auto;
 
 
}
 
.slider_r{
    width: 100%;
    height: 683px;
    float: left;
    z-index: -1;
    display: block;
}
 
.logo {
    float: left;
    margin-top: 50px;
    margin-left: 20px;
    z-index: 1;
    position: relative;
    width:300px;
    display: table;
}
 
.contacts {
    margin-top: 15px;
    margin-right: 50px;
    z-index: 3;
    position: relative;
    float: right;
    display: table;
}

@neoweb 1 / 1 / 2 Регистрация: 09.02.2016 Сообщений: 6
		1
	Абсолютное позиционирование - наложение слоя на слой 09.02.2016, 20:06. Показов 1260. Ответов 2 Метки нет (Все метки) Привет. Не могу никак понять, как корректно сверстать этот блок. Если поместить "лого" и "блок2" в слой слайдера, то перестают работать ссылки в "блоке2". Если правильно понял, то нужно задавать абсолютное позиционирование к слайдеру, "лого" и "блоку2, также понизить приоритет слайдера в z-index. Но никак не могу добиться корректной верстки. Буду благодарен за наводку в решении проблемы. Миниатюры 0

	10.02.2016, 07:57

Абсолютное позиционирование - наложение слоя на слой

Решение