html - CSS - 相对于实际应该留出的空间

Question

我正在显示更多警报按钮。按钮显示类型相对显示它的实际空间，如果我使用右/上/下/左移动

如何在没有设置父级高度的情况下删除相对按钮空间实际位置空间。

检查 fiddle为基础。

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

当您使用 right/top/bottom/left 使用 relative 位置时，按钮将从其静态位置移动，使其实际空间为空。如果您想将按钮从其实际空间移动到没有元素空白的位置，请使用 absolute 定位来放置元素。阅读更多关于定位的信息 here

Fiddle

CSS 更改

.alert-list {
    position:relative;
}

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