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

这是我的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>

来源

2016-02-27 Wojciech Glapa

目前还不清楚这应该是什么样子。 –

蓝色的div有宽度：auto;当蓝色div的宽度更高时，橙色div应该仍然浮动到蓝色div。 –

对不起...你有想要的结果图片吗？ –

我通过添加

z-index:auto;

和改变橙div的宽度以更高的解决了这个问题。它不响应蓝色，但它做的事情。

来源

2016-02-27 21:47:24

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

回答

相关问题