位置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頁面容器的外部 - 屏幕大小

回答

相關問題