CSS - relative leaving space where it should actually

Question

I am putting show more alert button. button display type relative show it actual space if i move above using right/top/bottom/left

How can I remove relative button space actual place space without set height of parent.

check fiddle for based.

HTML

<div class="alert-list">
    <div class="alert-error">Plase update your system with new release</div>
    <div class="alert-notify">New Release are ready for download verify with hash</div>
    <div class="alert-error">System is not actived. Please activce first for full access</div>
    <div class="alert-error">System is not actived. Please activce first for full access</div>
    <button class="bnt-show-alerts">show more</button>
</div>

CSS

.alert-list {
    width:400px;
    background-color:#E9E9E9;
    padding:3px;
    /*height: auto; automaticly arrange*/
}
.alert-error {
    background-color:rgba(255, 0, 0, 0.2);
    margin:2px;
}
.alert-notify {
    background-color:rgba(0, 255, 0, 0.2);
    margin:2px;
}
.bnt-show-alerts {
    position:relative;
    right:-310px;
    bottom:30px;
    opacity:0.5;
}
.bnt-show-alerts:hover {
    opacity:1.0;
} 

Answer 1

When you use relative position using right/top/bottom/left the the button is moved from its static position leaving its actual space empty. If you want to move the button from its actual space without the empty space of the element use absolute positioning to place the element. Read more about positioning here

Fiddle

CSS changes

.alert-list {
    position:relative;
}

.bnt-show-alerts {
    position:absolute;
    right:0;
    bottom:5px;
    opacity:0.5;
}