相對和絕對定位的問題

我有一些問題實現元素上的絕對定位。我試圖實現兩個橫幅廣告保持靜止時，用戶滾動通過一個股利。我試圖改變父母對親屬的立場，並且我希望孩子能夠保持靜止的立場。這會得到最初的放置權，但我仍然可以滾動過去的絕對div。這是適當的CSS/HTML。相對和絕對定位的問題

HTML：

<div id="pane1"> 


    <div id="home-banner1" class="banner"> 

    </div> 

    <div id="home-banner2" class="banner"> 

    </div> 

    <?php ..... ?> 


</div>

CSS：

#pane1{ 
width:100%; 
background-repeat: repeat; 
height:auto; 
display:inline-block; 
padding:20px 50px 50px 50px; 
min-height:500px; 
text-align:center; 
position:relative; 
} 

.banner{ 
width:50px; 
height:300px; 
background-color:white; 
position:absolute; 
top:0; 
} 

#home-banner1{ 
left:0; 
} 

#home-banner2{ 
right:0; 
}

感謝您的幫助！歡呼聲

來源

2015-11-13 colinmcp

使用position:fixed;作爲橫幅，以便即使在向上或向下滾動頁面時，它仍會保持在固定位置的屏幕上。

編輯

對於隱藏和橫幅僅低於#container元素的顯示，你可以使用一些jQuery的是這樣的：

$(window).scroll(function() { 
    var top_div_height = $('#container').height(); // height of the blue top container 

    if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container 
     $('#home-banner2').css({ 
      'display': 'none' 
     }); 
    } 
    else{ //... otherwise show the rightside banner 
     $('#home-banner2').css({ 
      'display': 'block' 
     }); 
    } 
});

確保你設置的CSS規則position:fixed;爲#home-banner2元件。

希望這會有所幫助。

來源

2015-11-13 17:12:06

嗨Akhilesh，我試過了，但它修復橫幅DOM的，而不是在「pane1」 DIV頂部。 – colinmcp

@colinmcp，我已經更新了我的答案。覈實。 –

謝謝，這就是我正在尋找的！ – colinmcp

實際上，您的代碼完全按預期工作。

Position: absolute使用position: relative將元素相對於最接近的父元素進行移動。所以，如果父元素超出了視口範圍，那麼它會執行子絕對元素。

爲了得到想要的結果，您需要一些javascript/jquery來修復該元素，因爲其父級在父級離開時進入視口和「unfix」。

東西類似Bootstraps' affix

來源

2015-11-13 17:24:46 Iecya

相對和絕對定位的問題

回答

相關問題