位置2箭头固定到CSS页面容器的外部 - 屏幕大小

我想创建一个HTML页面滑块，所以我有我的容器div，然后坐在外面，在左边我有一个Previous图标和右侧我有一个下一个图标。位置2箭头固定到CSS页面容器的外部 - 屏幕大小

我的问题是，当我将窗口调整为较小的屏幕时，图标会移动到容器的中心，我希望它们在调整大小时始终保持位置固定在容器的外部。

我的容器代码： -

width: 960px; 
margin: 0 auto; 
clear: both; 
overflow: hidden; 
min-height: 449px;

下一个和以前的代码：

a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png'); 
      width: 55px; height: 112px; left: 270px; background-position:0px; 
      background-repeat: no-repeat; position: fixed; top: 420px;}  

a.vehicleSliderRight {background: url('../img/slider_arrow_right.png'); 
      width: 55px; height: 112px; right: 270px; background-position:0px; 
      background-repeat: no-repeat; position: fixed; top: 420px;}

任何想法？欢呼声

来源

2012-12-03 John

您需要给主容器position: relative，然后用position: absolute将箭头元素放在容器内。

然后，您可以使用right: x , left: x , top: x , bottom: x.来操纵您在页面上放置两个箭头的位置，其中x是任何数字或百分比。

的jsfiddle：http://jsfiddle.net/LZG3R/3/

来源：Learn CSS Position in Ten Steps

来源

2012-12-03 16:03:40

是否有可能让他们在容器外坐？而不是在它？ – John

看看他们，他们在contine –

以外，我的形象似乎仍然消失在body'a背后。当我在“检查元素”中推动它时，它会向后移动。 – John

主要DIV中，你可以保持每个元素在单独的div确定各位置DIV百分比指定宽度

来源

2012-12-03 15:36:06 user1643087

你应该尝试这样的事：

.container{ 
    width: auto; 
    margin: 0 auto; 
    clear: none; 
} 

a.vehicleSliderLeft { 
    float: left; 
}  

a.vehicleSliderRight { 
    float: right; 
}

小提琴：http://jsfiddle.net/EhdkP/1/

来源

2012-12-03 16:00:54

位置2箭头固定到CSS页面容器的外部 - 屏幕大小

回答

相关问题