Question

我无法理解为什么我的figcaption没有正确定位。

我的图片为相对位置。

我将自己的形象视为绝对定位。

这意味着，带有bottom: 60px的figcaption应该距离图像底部60px。

但它不起作用，figcaption将窗口视为相对，不是图像。

我的观点

  <li class="item">
    <figure><%= image_tag photo.photo_url(:thumb), class: "spot-image" %>
        <figcaption class="spot-item-title">
            <h4><%= photo.title.truncate(30).downcase.capitalize %></h4>
            <span><%= photo.pins.count %> Productos etiquetados</span>
        </figcaption>
    </figure>
   </li>

我的sass

.item {
    @include span-columns(3);
    @include omega(3);
    background: $spot-bg;
    .spot-image {
        border: 4px solid red;
        position: relative;
    }
    .spot-item-title {
        position: absolute;
        bottom: 60px;
    }
}

CSS OUTPUT EDIT

  .item {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
    background: #f3f3f3;


  .item .spot-image {
    position: relative;
    border: 4px solid red;



  .item .spot-item-title {
    position: absolute;
    bottom: 60px;}

Answer 1

这意味着，底部：60px的figcaption应该距离图像底部60px

不，它没有;绝对定位将下一个祖先元素定位为除了默认static之外的值作为参考点（或视口，如果不存在这样的元素）;但你的形象不是祖先，而只是兄弟。

如果您希望标题与该元素的底部保持60px，则相对定位figure元素。

无法使图像相对定位

1 个答案: