Размещение вложенных блоков ПОД слоем, в который они вложены

StormMan · April 12, 2013

Друзья, проблема такая. Есть две кнопки для листания карусели вперёд и назад (.prev и .next), мне нужно их разместить за блоком #page, в котором эта карусель находится. Дизайнерская задумка такая, что тень от #page падает на эти блоки, а тень, отбрасываемая блоками, частично скрывается за блоком #page. То есть #page находится над .prev и .next. Но почему-то не получается у меня поместить эти стрелки в нужное место, в результате они сами отбрасывают свою тень на #page. То есть они находятся над контейнером, в который помещены, а не под ним, как мне это нужно. Танцы с бубном вокруг z-index и position мне не помогли.. Подскажите, вообще задача реальная стоит? И если реальная, как добиться нужного результата?

В коде ниже есть ещё блок header, его у меня получилось над #page поставить. А вот с .prev и .next фиаско.. Помогите, пожалуйста, советом.


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>тест</title>
<meta name="description" content="тест">
<style>
body {
background: #a1a1a1;
margin:0;font-size:1em;line-height:1;
}
.wrapper {
margin: 0 auto;
padding: 0;
width: 760px;
position: relative;
}
header {
position: fixed;
top: 0;
height: 30px;
width: 100%;
background: #54005c;
box-shadow: 0 0 9px rgba(0,0,0,.32);
overflow: hidden;
z-index: 10;
}
#page {
background-color: white;
min-height: 800px;
top: 30px;
box-shadow: 0 0 9px rgba(0,0,0,.32);
font-size: 14px;
z-index: 3;
}
#panel {
position: relative;
top: 14px;
background: #eee;
height: 60px;
}
a.prev,
a.next {
position: absolute;
background: #eee;
z-index: 5;
width: 40px;
height: 60px;
box-shadow: 0 0 7px rgba(0,0,0,.32);
}
a.prev {
left: -40px;
}
a.next {
right: -40px;
}
</style>
</head>
<body>
<header>
</header>
<div id="page" class="wrapper">
<section id="panel">
<a class="prev" id="prev_btn1" href="#"><span>prev</span></a>
<a class="next" id="next_btn1" href="#"><span>next</span></a>
</section>
</div>
</body>

p.s. Вёрстка только под современные браузеры.

Switch74 · April 12, 2013

можно макет увидеть и код в http://jsfiddle.net/

StormMan · April 12, 2013

Да, сделал: http://jsfiddle.net/KyYXq/

Switch74 · April 12, 2013

могу предложить вот такую схему, размер тени только подрегулировать нужно наверно

http://jsfiddle.net/KyYXq/2/

но я бы посоветовал у ссылок тень перекрыть или сдвинуть ее от центра, чтобы на карусельку не накладывалась

PS

наверно что-то вроде этого

http://jsfiddle.net/KyYXq/3/

Edited April 12, 2013 by Switch74

StormMan · April 13, 2013

Switch74, огромное спасибо за помощь и интересные идеи! Поэксперементирую с обоими вариантами))

Sign In

Размещение вложенных блоков ПОД слоем, в который они вложены

Question

StormMan

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

StormMan

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

StormMan

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information