Absolute positioning ignoring padding

You have two issues here:

First Issue

Your buttons are absolute but the first parent element that has a relative positioning is the mcontainer element. Thus, the buttons will only be absolute to this element.

Remove position:relative from the mcontainer element, and set the body element to have relative positioning.

Second Issue

As Turnip had pointed out, padding doesn't get taken into account for absolute positioning. Thus, offset this by setting a negative bottom and left styling to the button container.

See the fiddle: https://jsfiddle.net/6smpvqq8/1/


Absolute positioning does not take padding into account. A possible solution would be to add another container inside .mcontainer, that also has position: relative. That way, the inner container would respect the padding, and the absolute positioned element would be at the bottom of the inner container.

Tags:

Html

Css