Why isn't a margin being applied with my CSS?

Question

I have a div:

.divcom {
    background-color: lime;
    border-radius: 5px;
    width: 37.5%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.39), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
}

And i want it to have some space at the bottom before the page ends (Lets say 50%)

When I try to do bottom: 50% or margin-bottom: 50% it doesn't work (The color disappears).

I also tried putting margin-bottom: 50% into body but it didn't help.

Answer 1

Absolutely-positioned elements are outside of the normal document flow. They should be used sparingly, since they make a layout more complicated. Your element probably has a margin, but doesn't affect the other elements on the page because it's layered separately.

I'd also point out that bottom and margin-bottom are very different things, and that percentage margins can be troublesome (you don't always know what you're taking a percentage of).

For more specific advice, provide a more specific use case.

Answer 2

Try setting margin-bottom to auto and setting bottom to 10px. I can't really tell what you're trying though because of top which is set to 100%