0

На сайт добавляю кнопку с табом баннеров а-ля 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>

1

1 ответ 1

2

Почитайте о position и z-index, увы, но position: relative; не поможет вам с вашей задачей, а вот z-index вы почти использовали правильно.

Чтобы выполнить задачу, нужно использовать position: absolute и немного изменить вёрстку, чтобы использовать особенность свойства absolute.

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;
  /* Добавленный код */
  position: relative; /* Та самая осбенность, о которой говорилось в ответе */
}

.lay2 {
  display: none;
  list-style-type: none;
  width: 319px;
  padding: 0;
  background: #ffffff;
  opacity: 0;
  text-align: center;
  align: center;
  /* Добавленный код */
  position: absolute; /* Абсолютное позиционирование */
  /* Относительно родителя по координатам, указанным ниже */
  left: 0; 
  top: 30px;
  /* Так же, чтобы было красивее, ограничим блок по размерам, чтобы они не вылезали за границы вьюпорта */
  max-width: 350px; /* максимальная ширина */
  max-height: calc(100vh - 50px); /* максимальная высота (100vh == 100% высоты вьюпорта (лучше почитать о единицах измерения)), минус, 50px, которые являются высотой отступа*/
  overflow: auto; /* Автоматическое добавление скролла, если содержимое больше ограниченых размеров */
}

.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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.