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

How to overlay one div over another div

提问by tonyf

I need assistance with overlaying one individual divover another individual div.

我需要帮助将一个人覆盖div在另一个人上div。

My code looks like this:

我的代码如下所示：

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

Unfortunately I cannot nest the div#infoior the img, inside the first div.navi.

不幸的是，我不能将 thediv#infoi或 the嵌套img在第一个中div.navi。

It has to be two separate divs as shown, but I need to know how I could place the div#infoiover the div.naviand to the right most side and centered on top of the div.navi.

div如图所示，它必须是两个单独的s，但我需要知道如何div#infoi将div.navi和 放在最右侧并以div.navi.

回答by alex

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

I would suggest learning about position: relativeand child elements with position: absolute.

我建议position: relative使用position: absolute.

回答by Brett DeWoody

The accepted solution works great, but IMO lacks an explanation as to why it works. The example below is boiled down to the basics and separates the important CSS from the non-relevant styling CSS. As a bonus, I've also included a detailed explanation of how CSS positioning works.

公认的解决方案效果很好，但 IMO 缺乏对其为何有效的解释。下面的示例归结为基础知识，并将重要的 CSS 与不相关的样式 CSS 分开。作为奖励，我还详细解释了 CSS 定位的工作原理。

TLDR;if you only want the code, scroll down to The Result.

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

The Problem

问题

There are two separate, sibling, elements and the goal is to position the second element (with an idof infoi), so it appears within the previous element (the one with a classof navi). The HTML structure cannot be changed.

有两个独立的同级元素，目标是定位第二个元素（带有idof infoi），因此它出现在前一个元素（带有 aclass的元素navi）中。HTML 结构无法更改。

Proposed Solution

建议的解决方案

To achieve the desired result we're going to move, or position, the second element, which we'll call #infoiso it appears within the first element, which we'll call .navi. Specifically, we want #infoito be positioned in the top-right corner of .navi.

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

CSS Position Required Knowledge

CSS 位置所需知识

CSS has several properties for positioning elements. By default, all elements are position: static. This means the element will be positioned according to its order in the HTML structure, with few exceptions.

CSS 有几个用于定位元素的属性。默认情况下，所有元素都是position: static. 这意味着元素将根据其在 HTML 结构中的顺序进行定位，很少有例外。

The other positionvalues are relative, absolute, sticky, and fixed. By setting an element's positionto one of these other values it's now possible to use a combination of the following four properties to position the element:

其他position值是relative，absolute，sticky，和fixed。通过将元素设置position为这些其他值之一，现在可以使用以下四个属性的组合来定位元素：

• top
• right
• bottom
• left

• top
• right
• bottom
• left

In other words, by setting position: absolute, we can add top: 100pxto position the element 100 pixels from the top of the page. Conversely, if we set bottom: 100pxthe element would be positioned 100 pixels from the bottom of the page.

换句话说，通过设置position: absolute，我们可以将top: 100px元素添加到距页面顶部 100 像素的位置。相反，如果我们设置bottom: 100px元素将位于距页面底部 100 像素的位置。

Here's where many CSS newcomers get lost- position: absolutehas a frame of reference. In the example above, the frame of reference is the bodyelement. position: absolutewith top: 100pxmeans the element is positioned 100 pixels from the top of the bodyelement.

这是许多 CSS 新手迷失的地方-position: absolute有一个参考框架。在上面的例子中，参考系是body元素。position: absolutewithtop: 100px表示元素位于距body元素顶部 100 像素的位置。

The position frame of reference, or position context, can be altered by setting the positionof a parent element to any value other than position: static. That is, we can create a new position context by giving a parent element:

可以通过将position父元素的 设置为除 之外的任何值position: static来更改位置参考框架或位置上下文。也就是说，我们可以通过提供一个父元素来创建一个新的位置上下文：

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

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

For example, if a <div class="parent">element is given position: relative, any child elements use the <div class="parent">as their position context. If a child element were given position: absoluteand top: 100px, the element would be positioned 100 pixels from the top of the <div class="parent">element, because the <div class="parent">is now the position context.

例如，如果<div class="parent">给定一个元素position: relative，则任何子元素都将<div class="parent">用作它们的位置上下文。如果给定了子元素position: absoluteand top: 100px，则该元素将位于距<div class="parent">元素顶部 100 像素<div class="parent">的位置，因为现在是位置上下文。

The other factorto be aware of is stack order- or how elements are stacked in the z-direction. The must-know here is the stack order of elements are, by default, defined by the reverse of their order in the HTML structure. Consider the following example:

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

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

In this example, if the two <div>elements were positioned in the same place on the page, the <div>Top</div>element would cover the <div>Bottom</div>element. Since <div>Top</div>comes after <div>Bottom</div>in the HTML structure it has a higher stacking order.

在此示例中，如果两个<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>

The stacking order can be changed with CSS using the z-indexor orderproperties.

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

We can ignore the stacking order in this issue as the natural HTML structure of the elements means the element we want to appear on topcomes after the other element.

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

So, back to the problem at hand - we'll use position context to solve this issue.

所以，回到手头的问题——我们将使用位置上下文来解决这个问题。

The Solution

解决方案

As stated above, our goal is to position the #infoielement so it appears within the .navielement. To do this, we'll wrap the .naviand #infoielements in a new element <div class="wrapper">so we can create a new position context.

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

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

Then create a new position context by giving .wrappera position: relative.

然后通过给出.wrapper一个position: relative.

.wrapper {
  position: relative;
}

With this new position context, we can position #infoiwithin .wrapper. First, give #infoia position: absolute, allowing us to position #infoiabsolutely in .wrapper.

有了这个新的位置上下文，我们可以#infoi在.wrapper. 首先，给出#infoi一个position: absolute，允许我们#infoi绝对定位在 中.wrapper。

Then add top: 0and right: 0to position the #infoielement in the top-right corner. Remember, because the #infoielement is using .wrapperas its position context, it will be in the top-right of the .wrapperelement.

然后添加top: 0和right: 0将#infoi元素定位在右上角。请记住，因为#infoi元素.wrapper用作其位置上下文，所以它将位于.wrapper元素的右上角。

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

Because .wrapperis merely a container for .navi, positioning #infoiin the top-right corner of .wrappergives the effect of being positioned in the top-right corner of .navi.

因为.wrapper只是 的容器.navi，定位#infoi在 的右上角.wrapper会产生定位在 的右上角的效果.navi。

And there we have it, #infoinow appears to be in the top-right corner of .navi.

我们有了它，#infoi现在似乎位于 的右上角.navi。

The Result

结果

The example below is boiled down to the basics, and contains some minimal styling.

下面的示例归结为基础知识，并包含一些最小的样式。

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

An Alternate (Grid) Solution

替代（网格）解决方案

Here's an alternate solution using CSS Grid to position the .navielement with the #infoielement in the far right. I've used the verbose gridproperties to make it as clear as possible.

这是使用 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>

An Alternate (No Wrapper) Solution

替代（无包装）解决方案

In the case we can't edit any HTML, meaning we can't add a wrapper element, we can still achieve the desired effect.

在我们不能编辑任何 HTML 的情况下，意味着我们不能添加包装元素，我们仍然可以达到预期的效果。

Instead of using position: absoluteon the #infoielement, we'll use position: relative. This allows us to reposition the #infoielement from its default position below the .navielement. With position: relativewe can use a negative topvalue to move it up from its default position, and a leftvalue of 100%minus a few pixels, using left: calc(100% - 52px), to position it near the right-side.

我们将使用 ，而不是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>

回答by Hari Thakur

By using a divwith style z-index:1;and position: absolute;you can overlay your divon any other div.

通过使用divwith 样式z-index:1;，position: absolute;您可以将您的样式覆盖div在任何其他div.

z-indexdetermines the order in which divs 'stack'. A div with a higher z-indexwill appear in front of a div with a lower z-index. Note that this property only works with positioned elements.

z-index确定 div“堆叠”的顺序。一个更高的 divz-index将出现在一个更低的 div 前面z-index。请注意，此属性仅适用于定位元素。

回答by ja0nz

The new Grid CSSspecification provides a far more elegant solution. Using position: absolutemay lead to overlaps or scaling issues while Grid will save you from dirty CSS hacks.

新的Grid CSS规范提供了一个更优雅的解决方案。使用position: absolute可能会导致重叠或缩放问题，而 Grid 将使您免于肮脏的 CSS hacks。

Most minimal Grid Overlay example:

最小的网格叠加示例：

HTML

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

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

That's it. If you don't build for Internet Explorer, your code will most probably work.

就是这样。如果您不为 Internet Explorer 构建，您的代码很可能会工作。

回答by Tuco

Here follows a simple solution 100% based on CSS. The "secret" is to use the display: inline-blockin the wrapper element. The vertical-align: bottomin the image is a hack to overcome the 4px padding that some browsers add after the element.

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

Advice: if the element before the wrapper is inline they can end up nested. In this case you can "wrap the wrapper" inside a container with display: block- usually a good and old div.

建议：如果包装器之前的元素是内联的，它们最终可以嵌套。在这种情况下，您可以将包装纸“包裹”在一个容器中，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>

回答by DhavalThakor

This is what you need:

这是你需要的：

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>

回答by Muhammad Ahsan

I am not much of a coder nor an expert in CSS, but I am still using your idea in my web designs. I have tried different resolutions too:

我不是一个编码员，也不是 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>

Of course there will be a wrapper around both of them. You can control the location of the menu div which will be displayed within the header div with left margins and top positions. You can also set the div menu to float right if you like.

当然，它们周围都会有一个包装器。您可以控制菜单 div 的位置，该位置将显示在带有左边距和顶部位置的标题 div 中。如果您愿意，您还可以将 div 菜单设置为向右浮动。

回答by Nishad Up

Here is a simple example to bring an overlay effect with a loading icon over another div.

这是一个简单的示例，可以在另一个 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>

Try it here: http://jsbin.com/fotozolucu/edit?html,css,output

在这里试试：http: //jsbin.com/fotozolucu/edit?html,css,output