button position absolute not working as expected

Question

Can anyone explain why this button is not absolute-positioned to the right? I would expect it to be 3px from every edge.

Answer 1

You need to set the width of the button, to make it fill the space.

The easiest way to do this is to set it to the correct size.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 294px;
    width: 294px;
}