html - 将 div 元素定位在绝对定位的图像上

Question

我有两张图像彼此重叠(一张绝对定位)，这样我就可以将鼠标悬停在一张图片上以查看另一张。我还想放置一个跨越顶部图像下 1/4 的“文本框”(一个带有彩色背景的 div，可以容纳一些简单的文本)，但是，我在尝试定位时遇到了一些问题当它下面的图像已经绝对定位时说文本框。

我在下面附上了一个示例代码笔，以及一张我想要的图片。有没有使用 HTML/CSS 执行此操作的简单方法？

Codepen

<img src="img1.foo" class="img1" />
<img src="img2.foo" class="img2" />
<div class="textBar">Text bar here?</div>

Example image

Answer 1

https://codepen.io/anon/pen/rKEEKb

要添加到“标签”类的 Css:

.tag {
  position: absolute;
  z-index: 3; /*place above the images */
  bottom: 0; /* put it at the bottom */
  padding: 20px; 
  width: 100%;
  background: lightblue;
  box-sizing: border-box; /* allow for padding to be included in width */
}

你也可以在没有 jquery 的情况下使用 css :hover伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/:hover :

img.front:hover {
  opacity: 0;
}