html - 使元素与绝对定位元素对齐，就好像它是相对的一样

Question

我想创建带有关闭按钮的响应式弹出横幅，这是我的简单场景:

<div class="banner">
    <img src="...">
    <a href="" class="close-btn">X</a>
</div>

还有我的 CSS:

.banner img{
    max-width:100%;
    max-height:100%;
    position:absolute;
}
.close-btn{
    position:absolute;
    right:0;
    z-index:2;
    color:red;
    background:#000;
    padding:4px;
}

如您所见，我根据宽度和高度拉伸(stretch)图像。

问题:我希望close-btn 粘在图像的右侧并与它重叠。要解决此问题，banner 必须与图像的宽度相同。如果 banner 有 position:absolute 其宽度和高度当然是 0。

是否可以只用CSS实现？

这是 fiddle :http://jsfiddle.net/fjckls/qq590xz5/

我需要图像响应宽度和高度

Answer 1

要使您的图像完全响应宽度和高度，首先，您需要更改单位。您当前使用的 % 很好，但是对于“完全高度响应”的概念，% 单位没有多大帮助。

相反，您应该考虑使用 vh( View 高度)和 vw( View 宽度)单位，因为它们用于实际视口(viewport) 用户当前可以看到。

---

为了将“x”定位在图像的右上角，您将不得不稍微更改您的 css。

首先，您可以为您的横幅添加一个 CSS 规则。像这样的东西:

.banner {
    position:relative;
    display:inline-block;
}

同时从您的图像中删除“position:absolute”规则，因为现在您的横幅 div 将是您图像的大小(而不是 div 最初设置的默认“100% 屏幕”)。

---

这给我们留下了一个问题，您实际上并没有设置您希望“x”垂直显示的位置，因此它将默认为“它通常定位的位置”，在这种情况下，它会低于图像。要解决这个问题，您需要向“x”类添加 top: 或 bottom: 声明，在我的例子中，我选择将其设置为顶部(top:0;)。

可以显示整体fiddle here

或在这里:

.banner img {
  max-width: 100vw;
  max-height: 100vh;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  color: red;
  background: #000;
  padding: 4px;
}
.banner {
  position: relative;
  display: inline-block;
}

<div class="banner">
  <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> <a href="" class="close-btn">X</a>

</div>