css - 设置负边距，即其高度的百分比。纯 CSS

Question

我有一系列图像，它们有不同的标题。
这些标题中的每一个都需要看起来漂浮在图像底部的中间。
这是它的外观以及我如何在 div 中构建它的模型。
因为标题底部和下面的任何 div 之间需要有空间，所以标题不能绝对定位。

我知道这可以在 javascript 中完成，但这将是一个黑客，所以我更愿意找到一个只使用 CSS 的解决方案。



...这是到目前为止的代码:JS FIDDLE

.outer {
  position: relative;
  width: 320px;
  margin-bottom:24px // this needs to be the space between the bottom of the caption and the next image or whatever div is beneath.
}

.image {
  background-color: blue;
  width: 320px;
  height: 380px;
  position: relative;
  border-radius: 5px;
}

.caption {
  position: relative;
  margin-top: -24px;
  /* THIS NEEDS TO BE 50% of the Captions variable height */
}

.card {
  margin-right: 25%;
  margin-left: 5%;
  position: relative;
  background-color: #FFFFFF;
  padding: 24px;
  line-height: 24px;
}

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="card">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet. a
    </div>
  </div>
</div>

Answer 1

只需使用 position: absolute和 transform属性来解决问题。

下面是一个例子:
https://jsfiddle.net/nawLywc9/1/
.block类必须是这样的:

.block {
    position:relative; // This is important
    background-color:#FFFFFF;
    padding:24px;
    line-height:24px;
    bottom: -50%; // This is important
    transform: translateY(-50px); // This is important
    width: 60%;
    border-radius: 5px;
    margin: 0 auto; // Only if you need to be centered
}

这是预览: https://jsfiddle.net/nawLywc9/1/