如何将一个 div 叠加到另一个 div 上

我需要协助将一个单独的div叠加到另一个单独的div 。

我的代码看起来像这样：

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

不幸的是，我无法在第一个div.navi嵌入div#infoi或img 。

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

答案

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

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

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

问题

有两个独立的兄弟元素，目标是定位第二个元素（带有infoi的id ），使它出现在前一个元素（带有一class navi元素）中。 HTML 结构无法更改。

提出的解决方案

为了达到预期的效果，我们将移动或定位第二个元素，我们称之为#infoi因此它出现在第一个元素中，我们称之为.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表示元素位于body元素顶部100px处。

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

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

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

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

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

在此示例中，如果两个<div>元素位于页面上的相同位置，则<div>Top</div>元素将覆盖<div>Bottom</div>元素。由于<div>Top</div>位于 HTML 结构中的<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元素中。为此，我们将.navi和#infoi元素包装在一个新元素<div class="wrapper">这样我们就可以创建一个新的位置上下文。

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

然后通过给.wrapper一个position: relative创建一个新的位置上下文。

.wrapper {
  position: relative;
}

有了这个新的位置情况下，我们可以定位#infoi内.wrapper 。首先，给#infoi一个position: absolute ，让我们来定位#infoi在绝对.wrapper 。

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

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

因为.wrapper只是.wrapper的容器， #infoi在.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: relative ，而不是在#infoi元素上使用position: absolute 。这允许我们从#infoi元素下面的默认位置重新定位.navi元素。使用position: relative我们可以使用负top值将其从默认位置向上移动，使用left: calc(100% - 52px)将left值100%减去几个像素，将其置于右侧附近 - 侧。

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

通过使用带有样式z-index:1;的div z-index:1;和position: absolute;您可以覆盖你的div上的任何其他div 。

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