JanDotNet JanDotNet - 2 months ago 4x
CSS Question

Why does the css positioning not work as expected

Regarding to the positioning section of w3schools.com or that SO question, it should be possible to align a div element on bottom by applying the following rules:

  • container element's style must be
    position: relative;

  • target element's style must be
    position: absolute; bottom: 10px
    (to be aligned 10 px over the container's bottom).

Please find example code in the following bootply.

is the green box that should be placed on buttom, but instead it is placed 10px above the container element. However the settings
top/left/right: 10px
work as expected.

Could anybody explain that behavior? I am just learning CSS and want understand why it behaves that way...


The container-btn is actually 10px from the bottom of it's parent, col-md-4, it just happens that the parent doesn't have any height. Giving that column a height like the other, for example, .col-md-4 { height: 500px; } you will see the green box move down as you'd expect.