white-space：nowrap似乎影響內部元素的位置：絕對

Question

我想要一個水平的項目列表，它包含在一個固定寬度的水平滾動外部包裝中。外包裝具有相對位置。其中一個項目包含絕對定位的div。

當滾動外包裝，我期待綠色覆蓋保持在同一個位置。我認爲位置：絕對總是相對於具有確定位置的第一個祖先（這將是外包裝）？

我正在使用white-space：nowrap爲#wrapper獲取一行中的項目。

#outer-wrapper { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 150px; 
 
    overflow: scroll; 
 
} 
 

 
#wrapper { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
} 
 

 
#one { 
 
    background-color: red; 
 
} 
 

 
#two { 
 
    background-color: blue; 
 
} 
 

 
.box { 
 
    white-space: normal; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 150px; 
 
} 
 

 
.overlay { 
 
    background-color: green; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 40px; 
 
}

<div id="outer-wrapper"> 
 
    <div id="wrapper"> 
 
    <div id="one" class="box"> 
 
     <div class="overlay"></div> 
 
    </div> 
 
    <div id="two" class="box"></div> 
 
    </div> 
 
</div>

我想標記保持，因爲它是在這個例子中，雖然這不是完全固定的。

而我無法真正定義水平列表的固定寬度。

Answer 1

如果我的問題正確無誤，那麼只有HTML和CSS纔有可能。然而，你可以用jQuery實現這一目標如下：？

$(function() { 
 
    var wrapper = $('#outer-wrapper'); 
 
    
 
    $('#outer-wrapper').scroll(function() { 
 
    $('.overlay').css({ 
 
     'marginLeft': wrapper.scrollLeft() 
 
    }); 
 
    }); 
 
});

#outer-wrapper { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 150px; 
 
    overflow: scroll; 
 
} 
 

 
#wrapper { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
} 
 

 
#one { 
 
    background-color: red; 
 
} 
 

 
#two { 
 
    background-color: blue; 
 
} 
 

 
.box { 
 
    white-space: normal; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 150px; 
 
} 
 

 
.overlay { 
 
    background-color: green; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="outer-wrapper"> 
 
    <div id="wrapper"> 
 
    <div id="one" class="box"> 
 
     <div class="overlay"></div> 
 
    </div> 
 
    <div id="two" class="box"></div> 
 
    </div> 
 
</div>