Jak nakładać jeden div na inny div

Question

Jak nakładać jeden div na inny div

Mam nadzieję, że ktoś może pomóc, ale potrzebuję pomocy przy nakładaniu jednej osoby div na inną osobę div.

Mój kod wygląda tak:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

Niestety nie mogę zagnieździć div#infoi ani img, wewnątrz pierwszego div.navi.

Muszą być dwa oddzielne div s, jak pokazano, ale muszę wiedzieć, jak Mogę umieścić div#infoi nad div.navi i po prawej stronie i wyśrodkować na górze div.navi.

Doceni każdą pomoc w osiągnięciu to.

754

html css overlay position

Author: Ray Booysen, 2010-05-31

Source

7 answers

Przyjęte rozwiązanie działa świetnie, ale IMO brakuje wyjaśnienia, dlaczego to działa. Poniższy przykład jest sprowadzony do podstaw i oddziela ważny CSS od nieistotnych stylów CSS. Jako bonus, zawarłem również szczegółowe wyjaśnienie, jak działa pozycjonowanie CSS.

TLDR; jeśli chcesz tylko kod, przewiń w dół do wynik.

Problem

Istnieją 2 oddzielne, rodzeństwo, elementy, a celem jest położenie drugi element (z id z infoi) pojawia się więc w poprzednim elemencie (tym z class z navi). Struktura HTML nie może zostać zmieniona.

Proponowane Rozwiązanie

Aby osiągnąć pożądany rezultat, przesuniemy lub pozycjonujemy 2-gi element, który nazwiemy #infoi, więc pojawi się on w 1-tym elemencie, który nazwiemy .navi. W szczególności chcemy, aby #infoi był umieszczony w prawym górnym rogu .navi.

Wymagana pozycja CSS Wiedza

CSS ma kilka właściwości pozycjonowania elementów. Domyślnie wszystkie elementy to position: static. Oznacza to, że element będzie umieszczony zgodnie z jego kolejnością w strukturze HTML, z kilkoma wyjątkami.

Pozostałe position wartości to relative, absolute, i fixed. Ustawiając element position na jedną z tych 3 wartości, można teraz użyć kombinacji następujących 4 właściwości do pozycjonowania element:

top
right
bottom
left

Innymi słowy, ustawiając position: absolute, możemy dodać top: 100px do pozycji elementu 100px od góry strony. I odwrotnie, jeśli ustawimy bottom: 100px element będzie umieszczony 100px od dołu strony.

tutaj gubią się nowicjusze CSS - position: absolute ma ramy odniesienia. W powyższym przykładzie ramką odniesienia jest body element. position: absolute z top: 100px oznacza, że element jest umieszczony 100px od góry elementu body.

Ramka pozycji odniesienia lub kontekst pozycji może być zmieniona przez ustawienie position elementu nadrzędnego na każda wartość inna niż position: static. Oznacza to, że możemy utworzyć nowy kontekst pozycji, podając element nadrzędny:

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

Na przykład, jeśli element <div class="parent"> jest jeśli podano position: relative, elementy potomne używają <div class="parent"> jako kontekstu pozycji. Jeśli element potomny zostanie podany position: absolute i top: 100px, element będzie umieszczony 100px od góry elementu <div class="parent">, ponieważ <div class="parent"> jest teraz kontekstem pozycji.

Innym czynnikiem , którego należy pamiętać, jest kolejność stosów -lub sposób ułożenia elementów w kierunku Z. Należy tutaj wiedzieć, że kolejność elementów jest domyślnie zdefiniowana przez odwrotność ich kolejności w HTML struktura. Rozważmy następujący przykład:

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

W tym przykładzie, jeśli dwa elementy <div> zostały umieszczone w tym samym miejscu na stronie, element <div>Top</div> obejmowałby element <div>Bottom</div>. Ponieważ <div>Top</div> pojawia się po <div>Bottom</div> w strukturze HTML ma wyższą kolejność układania.

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>

Kolejność układania można zmienić za pomocą CSS przy użyciu właściwości z-index lub order.

Możemy zignorować kolejność układania w tym numerze jako naturalny Struktura HTML elementów oznacza, że element, na którym chcemy się pojawić top, pojawia się po drugim elemencie.

Wracając do problemu - użyjemy kontekstu pozycji, aby rozwiązać ten problem.

Rozwiązanie

Jak wspomniano powyżej, naszym celem jest umieszczenie elementu {[14] } tak, aby pojawił się w elemencie .navi. Aby to zrobić, zawijamy elementy .navi i #infoi w nowy element <div class="wrapper">, abyśmy mogli utworzyć nowy kontekst pozycji.

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

Następnie utwórz nowy kontekst pozycji poprzez podanie .wrapper a position: relative.

.wrapper {
  position: relative;
}

Z tym nowym kontekstem pozycyjnym możemy pozycjonować #infoi w obrębie .wrapper. Po pierwsze, daj #infoi a position: absolute, pozwalając nam umieścić #infoi absolutnie w .wrapper.

Następnie dodaj top: 0 i right: 0, aby umieścić element #infoi W prawym górnym rogu. Pamiętaj, że ponieważ element #infoi używa .wrapper jako kontekstu pozycji, będzie on w prawym górnym rogu elementu .wrapper.

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

Ponieważ .wrapper jest jedynie kontener dla .navi, pozycjonowanie {[14] } W prawym górnym rogu .wrapper daje efekt pozycjonowania w prawym górnym rogu .navi.

I mamy go, #infoi teraz wydaje się być w prawym górnym rogu .navi.

Wynik

Poniższy przykład jest sprowadzony do podstaw i zawiera pewną minimalną stylizację.

/*
*  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>

Alternatywne Rozwiązanie (Bez Owijarki)

W przypadku, gdy nie możemy edytować żadnego HTML, co oznacza, że nie możemy dodać elementu wrappera, nadal możemy osiągnąć pożądany efekt.

Zamiast używać position: absolute na elemencie #infoi, użyjemy position: relative. Pozwala nam to na zmianę pozycji elementu {[14] } z jego domyślnej pozycji poniżej elementu .navi. Z position: relative możemy użyć ujemnej wartości top, aby przesunąć ją z domyślnej pozycji, a left wartość 100% minus kilka pikseli, używając left: calc(100% - 52px), aby ustawić ją w pobliżu prawej strony.

/* 
*  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

Author: Brett DeWoody,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-25 21:48:24

Używając div ze stylami z-index:1; i position: absolute; możesz nakładać swoje div na dowolne inne div.

z-index określa kolejność, w jakiej div 'stos'. Div z wyższym z-index pojawi się przed div z niższym z-index. Zauważ, że ta właściwość działa tylko z pozycjonowanymi elementami .

100

Author: Hari Thakur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-20 22:15:02

To jest to, czego potrzebujesz:

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

Author: DhavalThakor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-30 16:35:02

Oto proste rozwiązanie w 100% oparte na CSS. "Sekretem" jest użycie display: inline-block w elemencie owijarki. vertical-align: bottom na obrazie jest hack, aby przezwyciężyć padding 4PX, które niektóre przeglądarki dodają po elemencie.

Advice: jeśli element przed wrapperem jest wbudowany, może on zostać zagnieżdżony. W tym przypadku owijkę można "owinąć" wewnątrz pojemnika za pomocą display: block - zwykle dobrego i Starego 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

Author: Tuco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-10 12:58:47

Nie jestem zbytnio programistą ani ekspertem w CSS, ale nadal używam twojego pomysłu w moich projektach internetowych. Ja też próbowałem różnych rozdzielczości:

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

Oczywiście będzie owijka wokół obu z nich. Możesz kontrolować lokalizację menu div, które będzie wyświetlane w nagłówku div z lewym marginesem i górną pozycją. Możesz również ustawić menu div, aby płynęło w prawo, jeśli chcesz. Mam nadzieję, że to pomoże.

9

Author: Muhammad Ahsan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-05 19:34:58

Oto prosty przykład wprowadzenia efektu nakładki z ikoną ładowania nad innym 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>

Spróbuj tutaj http://jsbin.com/fotozolucu/edit?html, css, output

0

Author: Nishad Up,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-28 07:31:18

score 1012 · Accepted Answer

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

Sugerowałbym poznanie position: relative i elementów potomnych z position: absolute.