带有flexbox的覆盖层

本文介绍了带有flexbox的覆盖层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以在文字上添加覆盖的项目"吗?哪个应该居中(水平和垂直).

Can i add an overlaying "item" over the text?Which should be centered (horizontal and vertically).

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

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

推荐答案

当前结构除外.

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

The overlay needs to be a child of the element to be overlaid...so that we can use positioning.

所以

.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的覆盖层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！