html - Div in front of another div -
i need move container of site in front of div background. how should looks like(ignore other elements, notice background , container) -
and how looks (wrong):
i trying "position: absolute" , "top: x" , "little works" when used magnifier in browser, scattered.
this actual code... html:
<div class="horni-panel"> <div class="logo"> zhlednuto.cz </div> <div class="menu"> home, atd. </div> </div> <!-- mini pozadi --> <div class="minipozadi"> ahoj </div> <!-- hlavni obsah --> <div class="container"> ahooj </div>
and css:
@font-face { font-family: lato-bold; src: url(fonts/lato-bold.ttf); } body { background-color: #34495e; } .horni-panel { border-top: 8px solid #34495e; position:absolute; top:0; left:0; right:0; height: 77px; width: 100%; background-color: #ffffff; } .logo { color: #34495e; font-family: lato-bold; font-size: 33px; } .minipozadi { height: 282px; width: 100%; background-image: url(img/bg.jpg); background-size: 100%; background-repeat: no-repeat; margin: 0 auto; position:absolute; top: 85px; left:0; right:0; } .container { z-index: -1; margin: 0 auto; top:0; right:0; left:0; width: 70%; height: 500px; background-color: #ffffff; border-radius: 5px; }
i'm suspecting looking
http://output.jsbin.com/puladizire/2/
.minipozadi { height: 282px; width: 100%; background:url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg); background-size: 100%; background-repeat: no-repeat; margin: 0 auto; position:absolute; top: 85px; left:0; right:0; z-index:1; text-align:center; font-size:30px; } .container { z-index: 100; margin: 0 auto; position:absolute; top:0; right:0; left:0; margin-top:200px; width: 70%; height: 400px; background-color: #ffffff; border-radius: 5px; }
i have added margin
, z-index
container
Comments
Post a Comment