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

当您使用relative使用right/top/bottom/left位置时，该按钮会从其静态位置移开，使其实际空间为空。如果要从实际空间移动按钮而不使用元素的空白空间，请使用absolute定位来放置元素。详细了解定位 here

<强> Fiddle

CSS更改

.alert-list {
    position:relative;
}

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

CSS - 实际应该离开的相对空间

1 个答案: