CSS使元素完全移出可見屏幕？

Question

假設我有一個div，我希望它超出了計算機顯示器屏幕的可見區域，以便當我使用CSS轉換將其移動到特定位置時，會創建從屏幕外緩慢移動的元素的效果，我也想創建它的逆向效果。

Answer 1

http://jsfiddle.net/DZFtt/

<div id="example"></div> 
<div id="example2"></div> 
<div id="example3"></div> 

#example{ 
    width:50px; 
    height:50px; 
    background-color: #386a95; 
    position:relative; /*Not moved*/ 
} 
#example2{ 
    width:50px; 
    height:50px; 
    background-color: rgb(177, 35, 35); 
    position:relative; 
    left:-25px; /*Pushed halfway off the screen*/ 
} 
#example3{ 
    width:50px; 
    height:50px; 
    background-color: green; 
    position:relative; 
    left:-50px; /*This is now totally hidden from view*/ 
}​ 

Answer 2

position: absolute;然後像做left: -100px;

工作示例（將鼠標懸停在箱和等待）：http://jsfiddle.net/fDnPj/

Answer 3

，如果你知道div的寬度您可以通過調整左財產使用的位置相結合，離開財產這樣

#my-div { 
    position:absolute;  
    left:-100px; 
    top:0; 
    width:100px; 
    background-color:red; 
} 

<div id="my-div">Hello</div>​ 

Play here。