空格：nowrap似乎会影响内部元素的位置：绝对

Question

I want to have a horizontal list of items, contained in a horizontally scrollable outer-wrapper with a fixed width. The outer-wrapper has a relative position. One of the items contains an absolute positioned div.

When scrolling the outer-wrapper, I was expecting the green overlay to remain at the same position. I thought position: absolute is always relative to the first ancestor with a defined position (which would be the outer-wrapper)?

I am using white-space: nowrap for the #wrapper to get the items in a row.

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

I'd like the markup to remain as it is in the example, although this is not totally fixed.

And I can't really define a fixed width for the horizontal list.

Answer 1

If I've got your question correctly then it is not possible with only HTML and CSS. However you can achieve it with jQuery as follows:

 $(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>