Question

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

Answer 1

position: absolute;然后执行left: -100px;

之类的操作

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

Answer 2

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

如果您知道div的宽度，则可以使用position和left属性的组合，如下所示

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

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

通过调整left属性来

Play here。

CSS制作元素完全移出可见屏幕？

3 个答案: