Форум Сайтостроение Веб-строительство

фоторама и z-index

nikonlay
На сайте с 11.12.2006
Offline
191
nikonlay
1029

Доброго вечера!

Верстаю тут один сайт, на нем в шапке фоторама (js галерея со сменой картинок) и логотип.

Логотип находится в диве над фоторамой, и хотелось бы, чтобы он "налезал" на нее наполовину, тк логотип высокий.

Но что бы я не делал, он упорно не хочет "лезть вверх".

вот html код: 

<body>

<div id="wrap">



<div id="header">

<a href="/"><img src="images/logo.jpg"></a>

</div>



<div class="fotorama" >

  <img src="images/1.png">

  <img src="images/2.jpg">

  <img src="images/3.png">

  <img src="images/4.png">

</div>



</div>

и вот цсс: 

html,body {margin:0;padding:0;background:#ffffff;width:100%;height:100%;}

#header{ height: 40px; background: #ccc; z-index: 100;}

#header a { z-index: 100; display: block;}

#header a img { z-index: 100; display: block;}

то есть я сначала добавил z-index: 100; к #header a img а потом, видя, что не помогает, добавил его еще и к #header a и просто к #header - но все равно он хочет лезть вверх - фоторама остается выше!

Подскажите, пожалуйста, кто-нибудь сталкивался с таким? Можно как-то решить?

Мощные фонари и телескоп: https://market.yandex.ru/business/79203856
Р
На сайте с 07.02.2013
Offline
178
рецидивист
#1

Попробуй отрицательный margin

Помести логотип внутрь <div class="fotorama" > или наоборот

Попробуй отрицательный margin для фоторамы

Попробуй абсолютное позиционирование

Можно было бы еще чего написать, но этих четырех вариантов хватит за глаза!

Jor
На сайте с 23.06.2012
Offline
42
Jor
#2
#header {
position: relative;
z-index: 99;
}

.fotorama {
position: relative;
top: -Npx; /* Смещение фоторамы вверх */
z-index: 1;
}

Так если, не то?

Р
На сайте с 07.02.2013
Offline
178
рецидивист
#3

Это смотря как делать!

Для примера: 


<head>

<style type="text/css">

.one, .three {

	display:block;

	width:200px;

	height:200px;

	background:#ccc;

	position:relative;

}

.two{

	width:100px;

	height:100px;

	background:#000;

	position:relative;

	bottom:-50px;

	z-index:1}

</style>

</head>



<body>



<div class="one">1</div>

<div class="two">1</div>

<div class="three">1</div>

</body>
maggotinaff
На сайте с 13.09.2012
Offline
10
maggotinaff
#4

Можно так .fotorama {position: relative; z-index: -1;}

стабильный доход (http://fx-trend.com/landing/pamm1?agent=502515) уже 2+ года
nikonlay
На сайте с 11.12.2006
Offline
191
nikonlay
#5

спасибо всем ответившим!

в итоге сделал, как написал Jor, и все стало ок, логотип вылез вверх над фоторамой.

какие выводы я сделал из ответов - почему у меня не получалось (для будущего):

1) Во-первых, не догадался, что и классу фоторамы можно дать z-index, а не только header и тому, что внутри хедера. И этой фотораме нужно дать маленький z-index: или 1, или вообще -1, как maggotinaff посоветовал.

2) А во-вторых, что даже важнее - я забыл, что z-index работает только для элементов, у которых есть свойство position! А там уже relative или absolute - не так важно, главное, чтобы хоть какой-то position был.

И если про эти две вещи не забывать, то все получится.

Еще раз спасибо ответившим!

Секреты индексации динамических страниц XML Sitemap: самый непонимаемый Google ответил на вопрос

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий