html - 将 div 定位在父 div 的中间，位于其他同级 div 之上

Question

我有这个 div 结构:

<div id="outer-div">
    <div id="first-div"></div>
    <div id="cell-icon">anFAicon</div>
</div>

和风格:

#outer-div {
  height:80px;
  width:100px;
  border: 1px solid red;
}
#first-div {
  width:50%;
  height:100%;
  border-right: 2px solid #619e38
}
#cell-icon {
  border:1px solid blue;
  position: absolute;
  top: 50%;
}

这将输出:

请看这里:https://codepen.io/neptune01/pen/RZgwvd

我需要的是:

我想将 div 单元格图标放在 outer-div 的中间，覆盖其他 div。尝试使用绝对位置，但它不起作用，正如您在上面看到的那样。

Answer 1

解决方案

#outer-div {
  height:80px;
  width:100px;
  border: 1px solid red;
  position: relative;
}
#first-div {
  width:50%;
  height:100%;
  border-right: 2px solid #619e38
}
#cell-icon {
  border:1px solid blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  background-color: #fff;
  z-index:1;
}

<div id="outer-div">
    <div id="first-div"></div>
    <div id="cell-icon">anFAicon</div>
</div>

我改变了什么

首先，我将 position: relative 添加到您的 #outer-div CSS。这样一来，当您稍后使用绝对定位时，元素将被限制在 #outer-div 容器内，而不是主体(元素相对于最近的父级定位，位置值为 绝对 或相对)。

然后，我简单地将 left: 50% 添加到 #cell-icon 元素，将其向左移动 50%，然后 transform:translate( -50%, -50%) 到 move the div into the exact centre .

最后，我添加了白色的 background-color 和 1 的 z-index(如评论部分所建议)将 #cell-icon 元素定位在其他两个 div 之上(如图所示)。