Как наложить один div поверх другого div

Мне нужна помощь с наложением одного отдельного 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.

Ответ 1

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

Ответ 2

Принятое решение прекрасно работает, но у IMO нет объяснения, почему оно работает. Пример ниже сводится к основам и отделяет важный CSS от несоответствующего CSS стиля. В качестве бонуса я также включил подробное объяснение того, как работает позиционирование CSS.

TL;DR; если вам нужен только код, прокрутите вниз до "Результат".

Эта проблема

Есть два отдельных элемента, родственных элемента, и цель состоит в том, чтобы расположить второй элемент (с id infoi), чтобы он появился в предыдущем элементе (элемент с class navi). Структура HTML не может быть изменена.

Предложенное решение

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

CSS Позиция Требуется Знание

У CSS есть несколько свойств для позиционирования элементов. По умолчанию все элементы являются position: static. Это означает, что элемент будет располагаться в соответствии с его порядком в структуре HTML, за некоторыми исключениями.

Другие значения position являются relative, absolute и fixed. Установив position элемента в одно из этих трех значений, теперь можно использовать комбинацию следующих четырех свойств для позиционирования элемента:

top
right
bottom
left

Другими словами, установив position: absolute, мы можем добавить top: 100px чтобы расположить элемент в 100 пикселях от верхней части страницы. И наоборот, если мы установим bottom: 100px элемент будет расположен в 100 пикселях от нижней части страницы.

Здесь, где теряются многие новички CSS - position: absolute система отсчета. В приведенном выше примере системой отсчета является элемент body. position: absolute с top: 100px означает, что элемент расположен на расстоянии 100 пикселей от верхней части элемента body.

Ориентир позиции или контекст позиции можно изменить, установив position родительского элемента в любое значение, отличное от position: static. То есть мы можем создать новый контекст позиции, задав родительский элемент:

position: absolute;
position: relative;
position: fixed;

Например, если элементу <div class="parent"> задана position: relative, любые дочерние элементы используют <div class="parent"> качестве контекста позиции. Если бы дочернему элементу были заданы position: absolute и top: 100px, элемент был бы расположен в 100 пикселях от вершины элемента <div class="parent">, потому что <div class="parent"> теперь является позицией контекст.

Другой фактор, о котором нужно знать, это порядок стека или то, как элементы располагаются в направлении z. Здесь необходимо знать, что порядок стеков элементов по умолчанию определяется в порядке, обратном их порядку в структуре HTML. Рассмотрим следующий пример:

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

В этом примере, если два элемента <div> были расположены в одном и том же месте на странице, элемент <div>Top</div> будет покрывать элемент <div>Bottom</div>. Поскольку <div>Top</div> идет после <div>Bottom</div> в структуре HTML, он имеет более высокий порядок наложения.

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

<div id="bottom">Bottom</div>
<div id="top">Top</div>

Ответ 3

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

z-index определяет порядок стека divs. DIV с более высоким z-index будет появляться перед DIV с более низким z-index. Обратите внимание, что это свойство работает только с расположенными элементами.

Ответ 4

Здесь следует простое решение 100% на основе CSS. "Секрет" - использовать display: inline-block в элементе обертки. vertical-align: bottom на изображении - это взломать, чтобы преодолеть 4px дополнение, которое некоторые браузеры добавляют после элемента.

Совет. Если элемент перед оберткой является встроенным, они могут вставить вложенные. В этом случае вы можете "обернуть обертку" внутри контейнера с display: block - обычно хороший и старый div.

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

Ответ 5

Это то, что вам нужно:

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;
  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;
} 


</style>

<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();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

Ответ 6

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

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  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">
      menu will go here
    </div>
  </div>
</div>

Ответ 7

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

Самый минимальный пример Grid Overlay:

HTML

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

CSS

.container {
  display: grid;
}

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

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

Ответ 8

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

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

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