带有flexbox的覆盖层

Question

我可以在文字上添加重叠的“项目”吗？ 哪个应该居中（水平和垂直）。

<div id="container">
  <div id="item-text">text</div>
  <div id="item-overlay"></div>
</div>

这是一个小提琴：https://jsfiddle.net/c1c7hsqj/

Answer 1

不符合当前结构。

叠加层需要是要叠加的元素的子元素......以便我们可以使用定位。

所以

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em;
  height:75px;
  background: plum;
}
#item-text {
  border: 1px solid grey;
  background: #c0ffee;
  padding: 1em;
  position: relative;
}
#item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.25);
}
#item-text:hover #item-overlay {
  background: rgba(255, 0, 0, 0.5);
}

<div class="parent">
  <div id="item-text">Lorem ipsum dolor sit amet.
    <div id="item-overlay"></div>
  </div>
</div>