На сайт добавляю кнопку с табом баннеров а-ля Google. Проблема в том, что мой появляющийся таб отображается не поверх сайта, а двигает контент вниз (по своему размеру). Я примерно понимаю, что нужно указать, например
position: relative;
z-index: 999999;
Но не пойму куда и является ли это решением? Прописывал уже везде в css....
body {
font-family: Arial, Verdana, sans-serif;
font-size: 0.75em;
color: #333;
width: 350px;
margin: 0 auto;
padding: 10px;
}
img {
border: 0px;
}
.lay1 {
width: 66px;
}
.lay2 {
display: none;
list-style-type: none;
width: 319px;
padding: 0;
background: #ffffff;
opacity: 0;
text-align: center;
align: center;
}
.lay2 img {
padding: 10px;
}
.lay1:hover .lay2 {
display: inline-block;
list-style-type: none;
width: 439px;
padding: 10;
background: #f6f6f6;
opacity: 1;
text-align: center;
border-radius: 15px;
}
.lay1:hover lay2 li {
display: inline-block;
height: 3em;
text-align: center;
}
.lay1:hover lay2 li:nth-child(2n) {
background: lightgray;
}
.sign_banner {
float: left;
align: center;
border: 0;
padding: 7px;
margin: 1px 0 1px 1px;
}
.sign_banner figcaption {
margin: 0 auto 5px;
}
.block_banner {
align: center;
}
.banner_lay_line p {
display: inline-block;
margin: 5px 0 5px 5px;
font-weight: normal;
}
<div class="lay1">
<a href="#"><img class="postlay" src="/images/banner/bg-.png"></a>
<div class="lay2">
<div class="banner_lay_line">
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
</div>
<div class="banner_lay_line">
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
</div>
<div class="banner_lay_line">
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
</div>
<div class="banner_lay_line">
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
<p>
<a href="#"><img src="" alt=""></a><br>name</p>
</div>
<div class="banner_lay_line">
<p>
<a href="#" alt=""><img src="" alt=""></a><br>name</p>
</div>
</div>
</div>
<div>КАКОЙ-ТО КОНТЕНТ</div>