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的宽度更改为更高。它不响应蓝色，但它做的事情。

位置绝对响应位置绝对宽度自动

1 个答案: