如何将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保留在屏幕左侧而与屏幕大小无关？

回答

相关问题