white-space：nowrapは内部要素に影響を与えるようです。位置：absolute

Question

水平方向にスクロール可能な固定幅のラッパーに含まれる項目の水平リストが必要です。外側ラッパーは相対位置を持ちます。アイテムの1つに、絶対配置されたdivが含まれています。

アウターラッパーをスクロールするとき、緑のオーバーレイが同じ位置にとどまることを期待していました。私はポジションを考えました：アブソリュートは常に、定義された位置（外側のラッパーになる）を持つ最初の祖先に相対的ですか？

私は空白を使用しています：#raprapperが行内の項目を取得するためのnowrapです。

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