Html 绝对位置响应绝对位置'；s宽度自动

这是我的CSS示例： 将鼠标悬停在橙色框上时，

a

元素将带下划线。 橙色框必须位于绿色框中“长文本”的上方，就像现在一样

问题是橙色框对蓝色框没有响应。我给了它一个例子橙色框应始终位于绿色框上方，并留给蓝色框

.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>

.green{
位置：相对位置；
浮动：左；
左：0；
排名：0；
空白：nowrap；
高度：40px；
宽度：100%；
背景：绿色；
}
格林先生{
显示：块；
文字装饰：无；
线高：40px；
字体系列：Tahoma、Verdana、Segoe、无衬线；
字体大小：16px；
颜色：#212121；
}
绿色a:悬停{
文字装饰：下划线；
}
蓝先生{
位置：绝对位置；
浮动：对；
右：0；
排名：0；
宽度：自动；
身高：100%；
背景：蓝色；
}
蓝p{
右边距：5px；
线高：40px；
字体系列：Tahoma、Verdana、Segoe、无衬线；
字体大小：16px；
字体大小：粗体；
颜色：#fff；
}
.橙色{
位置：绝对位置；
浮动：对；
右：106px；
排名：0；
身高：100%；
宽度：45px；
背景：橙色；
}
短文

我通过添加

z-index:auto;

---

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

现在还不清楚这应该是什么样子。蓝色div有宽度：auto；当蓝色div的宽度更大时，橙色div仍应向右浮动到蓝色div。对不起…您是否有所需结果的图像？我希望橙色div始终处于蓝色div，无论蓝色div的宽度是多少。