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

nikonlay
На сайте с 11.12.2006
Offline
162
1014

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

Верстаю тут один сайт, на нем в шапке фоторама (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 - но все равно он хочет лезть вверх - фоторама остается выше!

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

Р
На сайте с 07.02.2013
Offline
145
#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
145
#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
#4

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

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

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

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

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

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

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

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

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

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