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

Martin Park
Martin Park
12,792 Points
Posted by Martin Park
Martin Park
12,792 Points

Can someone remind me how the "photo-overlay" with absolute positioning works here please?

Sorry I've been on and off Treehouse the past few months so am feeling a little rusty.

I really like the "photo-overlay" effect in this lesson but am trying to understand how it works (rather than just pretending I do and moving on). I get that the "photo-overlay" is a flex column and how the flex items are displayed but I'm not sure how Guil manages to get these items to overlay the image.

I think it's because it's absolute positioning, which refers back to the first parent with relative positioning (the photo):

position: absolute;
top: 0;
right: 0;
bottom: 0; 
left: 0;

And this is the bit I can't remember/don't understand. An absolute position with top value of 0 should place the item at the top of the container. But how can it be set to 0 at the top and the bottom? And the left and right?

Thanks in advance :)

Great course by the way, really enjoying it.

===========================================

From index.html:

<div class="photo-container"> <div class="photo"> <img src="img/photos/1.jpg" alt="A photo of a grizzly bear">
<div class="photo-overlay"> <h3>Grizzly Bear</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button"> download <span class="btn-icon"></span> </a> </div> </div>

From main.css:

.photo-overlay { color: #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0, .65); }

1 Answer

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points
  1. Absolute positioning is set to the child element of the container who's position is set to relative.
  2. So Now the element will be placed according to the offsets relative to its parent's.
  3. Now, the distance of box's edges(CSS only have boxes), to its parent's edges are defined in four direction i.e. top, bottom, right and left.
  4. If you set the right:0 then, distance between right edge of parent and child which has relative position is 0, i.e. they will be collide inside their right edge inside parent's box. Same is the case with other offsets as well.
  5. If you set all the offset to 0 i.e. top,right,bottom,left=0 then, child have to expand in order that all the edges must collide inside the parent's container's edge.

:)

Martin Park
Martin Park
12,792 Points
Martin Park
Martin Park
12,792 Points

Thanks I kind of understand it now :) I should play around with it until it sinks in properly.