Как накладывать один div на другой div?

Question

У меня возникла проблема с наложением одного элемента div на другой элемент div.

Мой код выглядит следующим образом:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

К сожалению, я не могу вложить div#infoi или img внутрь первого div.navi.

Мне нужно, чтобы это были два отдельных div, как показано, но мне нужно понять, как можно разместить div#infoi поверх div.navi, с правой стороны и центрированным на верхней части div.navi.

Answer 1

Новая спецификация Grid CSS предлагает гораздо более элегантное решение. Использование position: absolute может привести к наложениям или проблемам с масштабированием, в то время как Grid избавит вас от грязных хитростей в CSS.

Вот очень минимальный пример наложения с помощью Grid:

HTML

<div class="container">
  <div class="content">Это содержимое</div>
  <div class="overlay">Наложение - должно быть расположено после содержимого в HTML</div>
</div>

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

Вот и всё. Если вы не ориентируетесь на Internet Explorer, ваш код, скорее всего, будет работать.

Answer 2

Используя div со стилем z-index: 1; и position: absolute;, вы можете наложить ваш div на любой другой div.

Свойство z-index определяет порядок, в котором элементы расположены по оси Z (т.е. как они "накладываются" друг на друга). Элемент с более высоким значением z-index будет отображаться перед элементом с более низким значением. Обратите внимание, что это свойство работает только для позиционированных элементов.

Answer 3

Вот что вам нужно:

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

#bg_mask {
  position: absolute;
  top: 0; 
  right: 0;  
  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background: url("img_dot_white.jpg") center; /* Изображение для решения проблемы с прозрачностью в IE */
  z-index: 0;
  visibility: hidden; /* Изначально скрыто */
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding: 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden; /* Изначально скрыто */
  border: 1px solid black;
  z-index: 1;
}

<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">
        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Нажмите кнопку 'Show front layer'<br/><br/><br/>

        Текст для тестирования ... (много текста для примера)

        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Теперь попробуйте нажать кнопку "Show front layer" или на текстовое поле. Они не активны.<br/><br/><br/>
            Используйте позицию: absolute чтобы разместить один div поверх другого.<br/><br/><br/>
            div bg_mask находится между baselayer и frontlayer.<br/><br/><br/>
            В bg_mask используется изображение img_dot_white.jpg (шириной и высотой 1 пиксель) в качестве фонового изображения, чтобы избежать проблем с прозрачностью в IE;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

Эта конструкция позволяет показать или скрыть передний слой вместе с фоновым маскирующим слоем, что помогает управлять видимостью элементов на странице. Вы можете использовать описанные функции и стили, чтобы достичь желаемого эффекта.

Answer 4

Я не профессионал в коде и не эксперт по CSS, но всё же использую вашу идею в своих веб-дизайнах. Я также пробовал разные разрешения экрана:

#wrapper {
  margin: 0 auto;
  width: 901px; /* Установка ширины контейнера */
  height: 100%; /* Высота на 100% */
  background-color: #f7f7f7; /* Фоновый цвет */
  background-image: url(images/wrapperback.gif); /* Фоновое изображение для wrapper */
  color: #000; /* Цвет текста по умолчанию */
}
#header {
  float: left; /* Применение флоата для заголовка */
  width: 100.00%; /* Ширина заголовка на 100% */
  height: 122px; /* Высота заголовка */
  background-color: #00314e; /* Фоновый цвет заголовка */
  background-image: url(images/header.jpg); /* Фоновое изображение для заголовка */
  color: #fff; /* Цвет текста в заголовке */
}
#menu {
  float: left; /* Применение флоата для меню */
  padding-top: 20px; /* Отступ сверху для меню */
  margin-left: 495px; /* Отступ слева для позиционирования меню */
  width: 390px; /* Ширина меню */
  color: #f1f1f1; /* Цвет текста в меню */
}

<div id="wrapper">
  <div id="header">
    <div id="menu">
      меню будет здесь
    </div>
  </div>
</div>

Конечно, вокруг этих элементов будет обёртка. Вы можете контролировать положение блока меню, который будет отображаться внутри блока заголовка, задавая отступы слева и вертикальное положение. Также вы можете установить меню с флоатом вправо, если хотите.

Answer 5

Вот простой пример, который демонстрирует эффект наложения с иконкой загрузки поверх другого div.

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Убедитесь, что путь указан правильно, и файл с именем 'loading.gif' существует */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper {
        position: relative;
        width: 400px;  /* Только для тестирования, удалите ширину и высоту, если у вас есть контент внутри этого div */
        height: 500px; /* Удалите это, если у вас есть контент внутри */
    }
</style>

<h2>Тестирование наложения</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Примените наложение поверх этого div</h3>
</div>

Попробуйте это здесь: http://jsbin.com/fotozolucu/edit?html,css,output

Как накладывать один div на другой div?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных