CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Strange behavior when using negative top margin on fig caption

I was trying an alternative to accomplish what Guil did in this lesson,

But I ran into some issues:

1) when I target the fig-caption with a negative margin-top , the browser sets its transparency to 100%.

for example:

.fig-caption { margin-top:-100px; }

2) I couldn't determine by what exact I should use in order to make the caption on the bottom

I was wondering if there's an alternative method other than absolute and relative positioning.

1 Answer

Austin Whipple
Austin Whipple
27,491 Points

Negative margins are a strangely divisive topic in CSS since some people love them and use them a lot, others (probably still use them), but consider them bad practice.

It's true that using negative margins can upset the flow of the page, especially when floating other elements around them, so they should applied with some amount of caution. I've used both for positioning and have found:

.div {
     position: relative;
     top: -2;
}

to be generally easier to manage than:

.div {
     margin-top: -2; 
}

You also get the benefit of adjusting the location according to every edge of the nearest relatively-position element in the DOM, so there's more precise control than you get with negative margins. For instance, instead of struggling with how to push an element to a specific corner with margins, you can just do:

.div-parent {
     position: relative;
}

.div {
     position: absolute;
     top: 0;
     right: 0;
}

That doesn't care about the size of either element, so it's easier to use with responsive designs, and doesn't require a whole lot of math to figure out exact margins to move the element around.

As for the transparency rendering issue, I'm not sure why that would be occurring, but could be related to z-index since position: relative; can change how things are arranged on every axis.