爲什麼分度：使水平滾動到父元素

後，我有這種情況http://jsfiddle.net/m_aleksandrova/9THdb/爲什麼分度：使水平滾動到父元素

div.with，後有：僞元素（流到右）之後。其父級（div.container）需要垂直滾動。

<div class="container"> 
    <div class="with-after"></div> 
</div>

問題是爲什麼：之後導致水平滾動？我認爲如果：之後是絕對定位的，它不再是流動的。

是否有可能：在元素在垂直滾動下方流動並進一步向右移動之後？

Illustration of my question

來源

2013-05-17 Maryna

要acheive的變3，你必須做出以下修改您的類-後。

這裏是Fiddle。

變化CSS：

.with-after { 
    border: 1px solid green; 
    height: 50px; 
    padding: 0 93px; 
    position: absolute; 
    right: 480px; 
    z-index: -1; 
}

你必須使你的情況下，主類即贏，後有絕對位置。這將消除它的流動，並通過Z-indexing它將位於垂直滾動的下方。希望這可以幫助。

的邏輯：

就像我剛纔所說，你無法通過使位置欺騙CSS：相對主類和現在的位置是：絕對的同一類的僞元素。因此，爲了達到在垂直滾動條下創建div的效果，必須爲父級元素下面的類定義position：absolute。因此，定義一個具有不同位置的同一個類的psudo對於瀏覽器來說不會讓瀏覽器識別出你想要的東西，並且通過同時使用僞類和實際元素類來表現奇怪行爲，因此使它對於瀏覽器知道你想要什麼，聲明主要的後續類作爲位置：絕對的，只是讓瀏覽器知道它必須在父元素下面帶有負Z指標。希望這有助於現在。

來源

2013-05-17 06:18:52 Nitesh

謝謝，解釋。現在我明白了，相對定位後不可能做到.with-after。並且我瞭解了關於欺騙CSS的觀點。 – Maryna

有什麼東西不喜歡這項工作嗎？ http://jsfiddle.net/David_Knowles/3arca/

.my-position-base {position: relative;}

添加此包裝給出了實現你在找什麼所需的瘋狂絕對定位的情況下。

來源

2013-05-17 06:56:27 Timidfriendly

謝謝@Timidfriendly，據我瞭解，你使用與Nathan Lee相同的技術。謝謝！ – Maryna

爲什麼分度：使水平滾動到父元素

回答

相關問題