Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Yassin Mzaik
Yassin Mzaik
Courses Plus Student 7,454 Points

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
29,725 Points
Austin Whipple
Austin Whipple
29,725 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.