Question

假设我有2个div：

<div id="divOuter">
    <div id="divInner"></div>
</div>

我们还要说外部div在页面下方约3/4，以屏幕为中心（水平），宽度为200px。显然，内部div最初将处于这个位置。如何将内部div保持在同一垂直位置（当前位置），但将其一直移动到屏幕左侧？

Answer 1

将divInner置于绝对位置并将左侧属性设置为零：

position:absolute;
left:0px;

<强> jsFiddle example

Answer 2

你可以添加一些CSS。然而，我知道的唯一方法是使用固定位置，例如：

    .position{
     position: relative; left: -20px;
      }

然后在你的div中

<div id="divInner" Class="position"></div>

左边20像素

Answer 3

您可以为#divInner提供绝对左侧位置，但将其顶部位置保留为自动;

#divInner {
    position: absolute;
    left: 0;
}

这假定#divOuter并非绝对定位。

Answer 4

这个HTML怎么样......

<div id="divOuterWrapper">
    <div id="divOuter">
        <div id="divInner"></div>
    </div>
</div>

......还有这个CSS？

#divOuterWrapper {
    position:relative;
    background-color:#dddddd;
}

#divOuter {
    width:200px;
    margin:0 auto;
    margin-top:300px;
    background-color:#00ff00;
    min-height:50px;
}

#divInner {
    position:absolute;
    background-color:#0000ff;
    min-height:30px;
    width:200px;
    margin-left:50%;
    left:-50%;
}

这是一个JSFiddle：

http://jsfiddle.net/5Qfq3/1/

将嵌套div放在屏幕的左侧

4 个答案: