Search the Community
Showing results for tags 'позиционированиеposition'.
Found 1 result
-
Размещение вложенных блоков ПОД слоем, в который они вложены
StormMan posted a question in HTML Coding
Друзья, проблема такая. Есть две кнопки для листания карусели вперёд и назад (.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. Вёрстка только под современные браузеры.