Как наложить один div на другой div

786

Надеясь, что кто-то может помочь, но мне нужна помощь с наложением одного человека 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.

Поблагодарите любую помощь в достижении этого.

Теги:
position
overlay

7 ответов

954
Лучший ответ

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

Поделиться
  • 3
    спасибо alex за вашу помощь, но сейчас я обнаружил, что когда я изменяю размер окна и перетаскиваю его, чтобы уменьшить, мое информационное изображение не остается с родительским div. По сути, нужно, чтобы он двигался вместе с родительским div и оставался практически на том же месте, даже если размер экрана несколько изменился.
  • 2
    @tonsils: инструкции alex должны дать желаемый результат, поэтому должно быть что-то еще, что вызывает проблему, которую вы описываете. Не могли бы вы предоставить нам образец кода (HTML + CSS), чтобы мы могли вам помочь?
Показать ещё 9 комментариев
136

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

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

Проблема

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

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

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

Обязательные знания CSS

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

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

  • top
  • right
  • bottom
  • left

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

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

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

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

Например, если элементу <div class="parent"> задана position: relative, любые дочерние элементы используют <div class="parent"> качестве своего контекста позиции. Если дочернему элементу задана position: absolute и top: 100px, элемент будет располагаться 100px от вершины элемента <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. Для этого мы #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 в верхнем правом углу. Помните, поскольку элемент #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 из его позиции по умолчанию под элементом .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>
Поделиться
  • 10
    это самая полезная запись IMO, потому что она объясняет, почему она работает!
  • 10
    Это, вероятно, лучшее объяснение того, как работает позиционирование, которое я видел до сих пор. Краткий, но достаточно глубокий, чтобы понять это правильно.
Показать ещё 3 комментария
95

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

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

Поделиться
  • 5
    Можете ли вы привести пример?
  • 1
    Примечание о позиционировании элементов имеет решающее значение.
18

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

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>
Поделиться
16

Здесь следует простое решение 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>
Поделиться
9

Я не очень кодер или эксперт в 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 плавало вправо, если хотите. Надеюсь, это поможет.

Поделиться
0

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню