Position Element relative to the bottom of its parent?

Question

Hi everyone!
I am  just on building a little site using bootstrap, and would like to position a link in the carousel relative to the bottom of the element so that on each slide the position of the link is in the same place on every slide.
Is there a way of doing this without adjusting each link individually ? Am i missing something very simple...?
Here is the site (http://port-80-6tmtlzk367.treehouse-app.com/)
If possible In the simplest and most code effective way achievable I want the bottom of each image to be level on each slide as well as the position of the links being at the same level to?
Please ignore the nav colour and link colours this is still a working progress!
Hope this makes some sort of sense....
Craig

fitri · Answer

Set position to relative on parent container (.slide in this example).
Set position to absolute on link and assign the value 0 to bottom (or the number of pixels from bottom, e.g. 50px)
```css
.slide {
  position: relative;
}
.link {
  position: absolute;
  bottom: 0;
}
```
This will however cause the elements inside link to layer over the parent container. So this could be fixed by adding padding-bottom to the parent container with the height of the link container. This is a common solution that I usually come across. you might not even need this part.
Hope this make sense.

Welcome to the Treehouse Community

Looking to learn something new?

Craig Watson

Craig Watson

Position Element relative to the bottom of its parent?

1 Answer

fitri

fitri