Шапка и логотип сайта сверху слайдера, как сделать?

Question

[hellen_fisher]

Здравствуйте! Не могу сделать так, чтобы слайдер работал, когда его нужно задвинуть под шапку сайта. Z-index не помогает, слайдер не работает. Кто-нибудь сталкивался с такой задачей?

Comments

[Ivan Bogachev]

Покажите код.

[hellen_fisher]

Ivan Bogachev,

<header class="main_menu">
		<div class="center">
			<nav>
				<a class="active" href="index.html">Home</a>
				<a href="about.html">About</a>
				<a href="cars.html">Cars</a>
				<a href="services.html"">Services</a>
				<a href="contacts.html">Contacts</a>
			</nav>
			<div class="menu_toggle"><span></span></div>
		</div>
	</header>
	<section class="logo_section">
		<div class="center">
			<a href="" class="logo"><img src="img/logo.png" alt="Logo"></a>
		</div>
	</section>
	<section class="slider">
		<div><img src="img/slide_1.jpg" alt=""></div>
		<div><img src="img/slide_2.jpg" alt=""></div>
		<div><img src="img/slide_3.jpg" alt=""></div>
	</section>

.main_menu{
	background: -webkit-linear-gradient(#e4e4e6,#d6d6d8);
	background: linear-gradient(#e4e4e6,#d6d6d8);
	padding: 11px 0px;
}

.main_menu nav{
	text-align: center;
}

.main_menu nav a{
	font-family: 'Marvel-Bold ';
	font-size: 24px;
	color: #313030;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
	padding: 5px 25px;
	margin: 0 12px;
}

.main_menu nav a:hover{
	text-decoration: underline;
}

.main_menu nav a.active{
	background: #fdc903;
	cursor: default;
}

.main_menu nav a.active:hover{
	text-decoration: none;
}

.logo_section {
	text-align: center;
	padding: 55px 0px 0px;
}

.slider {
	margin-top: 16px;
}
.slider img{
	max-width: 100%;
}

.slider button {
	position: absolute;
	top:50%;
	margin-top: -31px;
	width: 72px;
	height: 61px;
	background-color: rgba(0,0,0, .35);
	border: 0;
	font-size: 0px;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.slider button.slick-prev{
	left: 0px;
	background-image: url('../img/prev.png');
}

.slider button.slick-next{
	right: 0px;
	background-image: url('../img/next.png');
	background-repeat: no-repeat;
	background-position: center;
}

.slider button:hover {
	background-color: #fdc903;
}

[zoozag]

Чтобы задвинуть слайдер под шапку, достаточно header и .logo_section дать position: absolute

А как вообще z-index связан с работой слайдера?
Киньте сайт ваш посмотреть.

[hellen_fisher]

www.sergeibelousov.ru/training/elena0222/works/taxi

z-index у кнопок слайдера есть, равен 1
Задавала absolute, 3 слайда прокручивает(их всего 3), больше не хочет.

Answer 1

[Андрей]

а у слайдера какой z-index?
Да и вооще смотреть нужно. Ссылку скинь.
А слайдер не работает, видимо, потому как управляемые элементы у тебя под логотипом и не тыкаются. Хотя это предположение и нужно смотреть

Comments

[hellen_fisher]

У него -никакой, у кнопок слайдера z-index: 1;

[Андрей]

ссылка есть? или будем ванговать что там за разметка у тебя?
с position: relative; потренеруйся в блоках

[hellen_fisher]

Андрей, www.sergeibelousov.ru/training/elena0222/works/taxi

[Андрей]

допиши в .logo_section

.logo_section {
    position: absolute;
    top: 100px;
    z-index: 100;
    width: 100%;
}

[Андрей]

ессесно top нужно будет в мобильных вариантах указывать другой

[hellen_fisher]

Андрей, спасибо, мой спаситель! Все получилось!Помолюсь сегодня за Вас, чтобы все в жизни у Вас сложилось супер!

[Андрей]

Помолитесь, спасибо и Вам за внимание!