Как наложить один 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.

+836
источник поделиться
8 ответов

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

Я бы посоветовал узнать о position: relative и дочерних элементах с position: absolute.

+1121
источник

Принятое решение прекрасно работает, но у 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>

Порядок размещения можно изменить с помощью CSS, используя z-index или свойства order.

Мы можем игнорировать порядок размещения в этом выпуске, поскольку естественная HTML-структура элементов означает, что элемент, который мы хотим видеть top идет после другого элемента.

Итак, вернемся к проблеме - мы будем использовать контекст позиции для решения этой проблемы.

Решение

Как указано выше, наша цель - расположить элемент #infoi так, чтобы он находился .navi элемента .navi. Для этого мы #infoi элементы .navi и #infoi в новый элемент <div class="wrapper"> чтобы мы могли создать новый контекст позиции.

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

Затем создайте новый контекст позиции, задав .wrapper position: relative.

.wrapper {
  position: relative;
}

С этим новым контекстом позиции мы можем позиционировать #infoi внутри .wrapper. Во-первых, дайте #infoi position: absolute, что позволит нам позиционировать #infoi абсолютно в .wrapper.

Затем добавьте top: 0 и right: 0 чтобы расположить элемент #infoi в верхнем правом углу. Помните, поскольку элемент #infoi использует .wrapper качестве контекста позиции, он будет в правом .wrapper элемента .wrapper.

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

Поскольку .wrapper - это просто контейнер для .navi, расположение #infoi в верхнем правом углу .wrapper дает эффект расположения в верхнем правом углу .navi.

И вот, у нас это есть, #infoi теперь кажется в правом верхнем углу .navi.

Результат

Пример ниже сводится к основам и содержит некоторые минимальные стили.

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}
<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

Альтернативное (без оболочки) решение

В случае, если мы не можем редактировать HTML, то есть мы не можем добавить элемент-обертку, мы все равно можем достичь желаемого эффекта.

Вместо использования position: absolute в элементе #infoi мы будем использовать position: relative #infoi. Это позволяет нам переместить элемент #infoi из положения по умолчанию ниже элемента .navi. С помощью position: relative мы можем использовать отрицательное top значение, чтобы переместить его из положения по умолчанию, и left значение 100% минус несколько пикселей, используя left: calc(100% - 52px), чтобы расположить его рядом с правым. боковая сторона.

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}
<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
+250
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

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

+107
источник

Здесь следует простое решение 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>
+20
источник

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

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>
+19
источник

Я не большой программист и не эксперт в 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>

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

+9
источник

Новая спецификация 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, ваш код, скорее всего, будет работать.

+4
источник

Вот простой пример добавления эффекта наложения со значком загрузки поверх другого элемента 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

-1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос