如何將div保留在屏幕左側而與屏幕大小無關？

我目前正在使用某個點上的滑塊的網站，而不是使用滑塊內部的常規箭頭（左右箭頭，用於滑塊導航），我需要將左邊的一個連接到左側屏幕的大小與屏幕大小無關，與右箭頭相同。它只適用於我的屏幕尺寸目前（1366x768）和代碼是如何將div保留在屏幕左側而與屏幕大小無關？

.bx-prev { 
margin-left:-16.2%; 
position:absolute; 
margin-top:-200px; 
} 

.bx-next{ 
margin-left:86.2%; 
position:absolute; 
margin-top:-200px; 
}

任何幫助，將不勝感激。另外，如果可以在Javascript/jQuery中做到最好，我也對此表示歡迎。

來源

2011-10-28 askome

注意：如果你正在使用'位置：與利潤，而不是'top' /'left' /'bottom' /'right' absolute'，你可能做了錯事。 – RoToRa

如果我使用top/left/bottom/right，它會留在滑塊內部。我需要將它分開並分別附着到屏幕的左側和右側邊緣。 – askome

您需要添加position:relative父元素，那麼你可以使用position:absolute;在相關的父元素

.bx-prev { 

position:absolute; 
top:200px; 
left: 0px; 
    height:10px; 
    width:10px; 
    background:lime; 
} 

.bx-next{ 
    top:200px; 
height:10px; 
    width:10px; 
    background:lime; 
position:absolute; 

right: 0px; 
} 
.slider{ 
position:relative; 
    width:500px; 
     height:500px; 
    background:red; 
} 

<div class="slider"> 
    <div class="bx-next"></div> 
    <div class="bx-prev"></div> 
</div>

sample

來源

2011-10-28 15:17:21 Kimtho6

position: fixed;

是你的問題的答案。

來源

2011-10-28 15:13:15 Johan

我不認爲你完全理解我，或者我只是吮吸解釋，但我的意思是，只要屏幕尺寸較大，屏幕左側和箭頭之間就會出現一個空格，但不會附加到它。 – askome

您使用絕對定位，所以你可以這樣做：

.bx-prev { 
margin-left:-16.2%; 
position:absolute; 
margin-top:-200px; 
left: 0px; 
} 

.bx-next{ 
margin-left:86.2%; 
position:absolute; 
margin-top:-200px; 
right: 0px; 
}

來源

2011-10-28 15:15:09 andreapier

這不會改變左箭頭的任何內容，如果屏幕更大，屏幕左邊緣和箭頭之間會出現一個帽子，如果更小，箭頭只會隱藏在屏幕的左邊緣。右箭頭正好消失離屏幕右邊太遠。 – askome

請張貼thml代碼，因爲我明顯誤解了你。 – andreapier

http://work.codera.in/re – askome

絕對定位取元件從它的容器的，並可以隨意地放置它使用top/bottom/left/right該文檔。

這是一個jsfiddle，它在標記中顯示b裏面的a，但我已經把它放在最左邊。這與c在右側相同。

http://jsfiddle.net/w2CsF/1/

來源

2011-10-28 15:18:07 Curt

如何將div保留在屏幕左側而與屏幕大小無關？

回答

相關問題