html - 绝对位置响应于绝对位置的宽度自动

Question

这是我的 CSS 示例:https://jsfiddle.net/80e4u0dd/ 当您将鼠标悬停在橙色框上时，a 元素会带有下划线。 橙色框必须在绿色框的“长文本”上方，就像现在一样。

问题是橙色框对蓝色框没有响应。我给它 right: 106px 来展示一个例子。 橙色框应始终位于绿色框上方并留给蓝色框。

.green {
    position: relative;
    float: left;
    left: 0;
    top: 0;
    white-space: nowrap;
    height: 40px;
    width: 100%;
    background: green;
}

.green a {
    display: block;
    text-decoration: none;
    line-height: 40px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 16px;
    color: #212121;
}

.green a:hover {
    text-decoration: underline;
}

.blue {
    position: absolute;
    float: right;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    background: blue;
}

.blue p {
    margin-right: 5px;
    line-height: 40px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.orange {
    position: absolute;
    float: right;
    right: 106px;
    top: 0;
    height: 100%;
    width: 45px;
    background: orange;
}



<div style="width: 400px; height: 100px;">
    <div class="green">
        <div class="blue">
            <p>SHORT TEXT</p>
        </div>
        <a href="#">
            LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG                     TEXT   LONG TEXT LONG TEXT LONG TEXT   LONG TEXT LONG TEXT LONG TEXT   LONG TEXT                   LONG TEXT LONG TEXT   LONG TEXT LONG TEXT LONG TEXT   LONG TEXT LONG TEXT LONG                   TEXT   LONG TEXT LONG TEXT LONG TEXT                            
            <span class="orange"></span>
        </a>
    </div>
</div>

Answer 1

我通过添加解决了这个问题

z-index:auto;

并将橙色 div 的宽度更改为更高。它对蓝色没有反应，但它可以做到这一点。