如何将一个div覆盖在另一个div上

957

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。

— 托尼夫
source

不是这个问题的情况，但是如果您在另一个div中有一个div，则内部div可能会由于完全或部分被屏蔽overflow: hidden，请overflow: visible改用。

— 克里斯托弗·罗西

1240

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

— 亚历克斯
source

3

感谢Alex的帮助，但是现在我发现，当我调整窗口大小并将其拖动到较小的窗口时，我的信息图像不会停留在其父div上。基本上希望它与父div一起移动，并且即使屏幕已经过一些调整，也几乎保持在同一位置。

— tonyf

2

@tonsils：alex的说明应为您提供所需的结果，因此必须有其他原因导致您描述的问题。您能否向我们提供代码示例（HTML + CSS），以便我们为您提供帮助？

— 2010年

9

absolute位置相对于其最接近的显式位置（position:absolute|relative|fixed）父元素的位置。只是进一步澄清... jsfiddle.net/p5jkc8gz

— xandercode

根据情况，可以对此进行调整。在我的情况下，我不需要#navi到top：0 left：0：作为一般情况，如果您具有HTML代码，则只要解析HTML树，它就可以放置。因此，在这种情况下，也许不需要定义。

— Fabricio PH

401

公认的解决方案效果很好，但是IMO缺乏有关为什么起作用的解释。下面的示例归结为基本示例，并将重要的CSS与无关的样式CSS分开。另外，我还详细介绍了CSS定位的工作原理。

TLDR；如果只需要代码，请向下滚动到Result。

问题

有两个单独的，兄弟姐妹，元件和目标是所述第二元件（带有定位id的infoi），所以会出现前一个元素（具有一个内class的navi）。HTML结构无法更改。

拟议的解决方案

为了获得所需的结果，我们将移动或定位第二个元素（称为#infoi第一个元素），使其出现在第一个元素（称为）中.navi。具体来说，我们希望#infoi位于的右上角.navi。

CSS位置要求知识

CSS具有一些用于定位元素的属性。默认情况下，所有元素均为position: static。这意味着该元素将按照其在HTML结构中的顺序定位，只有少数例外。

其他position值是relative，absolute，sticky，和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: relative;
position: absolute;
position: sticky;
position: fixed;

例如，如果<div class="parent">给定了元素position: relative，则任何子元素都将<div class="parent">用作其位置上下文。如果给定了子元素position: absolute和top: 100px，则该元素将被定位为距离<div class="parent">元素顶部100个像素，这<div class="parent">是因为现在是position上下文。

要注意的另一个因素是堆叠顺序 -或元素如何沿z方向堆叠。这里必须知道的是，元素的堆栈顺序默认情况下是通过HTML结构中它们的顺序相反来定义的。考虑以下示例：

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

在此示例中，如果两个<div>元素位于页面上的相同位置，则该<div>Top</div>元素将覆盖该<div>Bottom</div>元素。由于在HTML结构中排在<div>Top</div>后面<div>Bottom</div>，因此具有更高的堆叠顺序。

显示代码段

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>

展开摘要

可以使用z-index或order属性通过CSS更改堆叠顺序。

在本期中，我们可以忽略堆叠顺序，因为元素的自然HTML结构意味着我们要出现top的元素位于另一个元素之后。

因此，回到眼前的问题-我们将使用职位上下文解决此问题。

解决方案

如上所述，我们的目标是#infoi放置元素，使其出现在.navi元素内。为此，我们将.naviand #infoi元素包装在一个新元素中，<div class="wrapper">以便我们可以创建一个新的position上下文。

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

然后通过给出.wrapper一个新的职位上下文position: relative。

.wrapper {
  position: relative;
}

有了这个新的职位背景，我们就可以#infoi在内定位.wrapper。首先，给#infoia 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>

展开摘要

替代（网格）解决方案

这是使用CSS Grid .navi将#infoi元素放置在最右边的另一种解决方案。我使用了详细grid属性，使其尽可能清晰。

显示代码段

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

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

展开摘要

— 布雷特·德伍德迪
source

29

这是IMO最有用的条目，因为它解释了它为什么起作用！

— Bret Weinraub

20

到目前为止，这可能是对定位工作原理的最好解释。简明扼要，但深度足以使其正确。

— Marcel

2

同上质量的答案。我见过的最清晰的解释。

— 韦德哈特勒

2

这是一个伟大的回答特别是对CSS新手

— 阿里·伊扎特奥德

2

解释的荣誉

— Joey587 '19

111

通过使用 div with样式z-index:1;，position: absolute;您可以将其叠加div在任何其他样式上div。

z-index确定div堆栈的顺序。具有较高div的div z-index将出现在具有较低div的div的前面z-index。请注意，此属性仅适用于定位的元素。

— 哈里·塔库尔
source

5

你能提供一个例子吗？

— Fabricio PH

3

关于定位元素的注释至关重要。

— 劳伦斯·多尔

这个答案太不完整了，需要整篇文章来解释原因。查找堆叠上下文。

— Bojidar Stanchev

39

新的Grid CSS规范提供了更为优雅的解决方案。使用position: absolute网格可能会导致重叠或缩放问题，而Grid可以使您免受脏CSS黑客的攻击。

最小的网格叠加示例：

的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构建的，则您的代码很可能会工作。

— ja0nz
source

4

这应该是最佳答案。

— 在线

1

优越的答案。所选答案应重新评估。

— AbdulG

完美的解决方案

— Deniz da King

24

以下是基于CSS的简单解决方案100％。“秘密”是display: inline-block在包装元素中使用。的vertical-align: bottom图像中是克服4像素填充，有些浏览器元素后添加一个黑客。

建议：如果包装器之前的元素是内联的，则最终可能会嵌套。在这种情况下，您可以使用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>

展开摘要

— 图科
source

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>

展开摘要

— 达瓦尔他哥
source

9

我既不是编码员，也不是CSS专家，但是我仍然在Web设计中使用您的想法。我也尝试过不同的解决方案：

#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菜单设置为浮动。

— 穆罕默德·阿桑（Muhammad Ahsan）
source

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

— Nishad Up
source