用 flexbox 叠加

Question

我可以在文本上添加叠加层 "item" 吗？哪个应该居中（水平和垂直）。

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

这是一个fiddle：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>

用 flexbox 叠加

Overlayer with flexbox

css

flexbox