Question

我目前正在开发一个在某个时刻使用滑块的网站，但不是滑块内的常规箭头（左箭头和右箭头，滑块导航）我需要将左边的一个附加到屏幕左侧与屏幕尺寸无关，与右箭头相同。它仅适用于我目前的屏幕尺寸（1366x768），代码为

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

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

任何帮助将不胜感激。此外，如果它可以在Javascript / jQuery中做得最好，我也对此持开放态度。

Answer 1

您需要将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

Answer 2

您正在使用绝对定位，因此您可以：

.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;
}

Answer 3

绝对定位将元素从容器中取出，并允许您使用top / bottom / left / right自由地将其放置在文档上。

这是一个jsfiddle，它在标记中显示b内的a，但我已经将它提到了最左边。这与右侧的c相同。

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

Answer 4

position: fixed;

是你问题的答案。

无论屏幕尺寸如何，如何在屏幕左侧保留div？

4 个答案: