位置絕對響應位置絕對的寬度自動

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

位置絕對響應位置絕對的寬度自動

回答

相關問題