CODEWITHSUNDEEP
htmlcsssass
Gibson
Gibson

Reputation: 2085

Can't get image to be relative positioned

I can't understand why is my figcaption not positioning correctly.

I have my image as relative positioned.

I have my figcaption as absolute positioned.

That means, the figcaption with a bottom: 60px should be at 60px from the images bottom.

But its not working, figcaption is getting the window as relative, and not the image.

My view

  <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>

My 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;}

Upvotes: 0

Views: 106

Answers (1)

C3roe
C3roe

Reputation: 96325

That means, the figcaption with a bottom: 60px should be at 60px from the images bottom

No, it does not; absolute positioning takes the next ancestor element positioned with a value other then the default static as reference point (or the viewport, if no such element exists); but your image is not an ancestor, but a mere sibling.

Position the figure element relatively, if you want your caption to stay 60px from the bottom of that element.

Upvotes: 2

Related Questions