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

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

7 754
html css overlay cursor-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 на infoi) таким образом, он появляется в предыдущем элементе (тот, с class на 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;

например, если a <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 'стек'. 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 в элемент программы-оболочки. Элемент 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