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

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

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

754
css html overlay position

7 ответов

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

1012

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

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

Проблема

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

Предлагаемое Решение

для достижения желаемого результата мы собираемся переместить, или расположить, 2-й элемент, который мы будем называть #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 элемент. Для этого мы завернем .navi и #infoi элементы в новом элементе <div class="wrapper"> Итак, мы можем создать новый контекст позиции. 

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

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

.wrapper {
  position: relative;
}

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

затем добавить top: 0 и right: 0 в положение #infoi элемент в правом верхнем углу. Помните, потому что #infoi элемент, используя .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>
137

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

z-index определяет порядок, в котором divs 'stack'. Div с более высоким z-index появится перед div с более низким z-index. Обратите внимание, что это свойство работает только с позиционированными элементами.

100

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

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

здесь следует простое решение 100% на основе CSS. "Секрет" заключается в использовании display: inline-block в элементе оболочки. The 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>
16

Я не очень кодер и не эксперт в 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

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

0