css - 要素を表示画面から完全に移動させるCSS？

Question

divがあり、コンピューターのモニター画面の表示領域から外したい場合は、CSSトランジションを使用して特定の位置に移動すると、画面の外側からゆっくりと要素が移動する効果が作成されます。また、その逆効果を作成したいと思います。

Answer 1

position: absolute;その後、次のようなことをしますleft: -100px;

実例（ボックスにカーソルを合わせて待つ）：http：//jsfiddle.net/fDnPj/

Answer 2

divの幅がわかっている場合は、このようにpositionとleftプロパティの組み合わせを使用できます。

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

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

左側のプロパティを調整して、ここで再生します。</ p>

Answer 3

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*/
}​