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 might want to use inherit/100% value for width and height css properties.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
}
.wrapper button {
    width: inherit;
    height: inherit;
}

Fiddle

NOTE: If you want to have the dimensions exactly 300 then subtract padding. (which will be 294px)