css - CSS使元素完全移出可见屏幕？

Question

假设我有一个 div，我希望它位于计算机显示器屏幕的可见区域之外，这样当我使用 CSS 过渡将其移动到特定位置时，会创建元素从屏幕外部缓慢移动的效果，并且我也想创造它的反向效果。

Answer 1

position: absolute;然后做类似的事情left: -100px;

工作示例（将鼠标悬停在框上并等待）：http: //jsfiddle.net/fDnPj/

Answer 2

http://jsfiddle.net/DZFtt/

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

​</p>

#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 3

如果你知道 div 的宽度，你可以像这样使用 position 和 left 属性的组合

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

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

通过调整left属性来玩这里。​</p>