CSS中的元素位置答案

【问题标题】：Element Position in CSSCSS中的元素位置
【发布时间】：2013-09-07 17:50:23
【问题描述】：

我还是个使用 CSS 的新手.. 我真的需要帮助来完成我们团队的移动应用小项目：D

这是我的问题：D CSS是否可以将“一个元素”放在“另一个元素”之上？

例如，我有“木板”元素，而我有另一个元素“木棍”.. 我想要“木板”元素后面的“棍子”元素。所以它就像一个广告牌风格：D （如果在 Photoshop 中，我们可以将图层“sticks”拖到图层“board”下方）

如果可以，那该怎么做呢？

我尝试寻找一些来源，但没有得到任何结果.. 任何帮助将不胜感激：D（代码/参考/等）非常感谢

注意：无法发布图片:(因为我刚开始使用stackoverflow，抱歉:(

【问题讨论】：

使用z-index，请注意，您还需要设置元素的position属性才能使其工作

标签： javascript html css css-position

【解决方案1】：

是的，您可以，有多种方法可以实现这一目标..

第一次使用position: relative; 和z-index（可选）

Demo

<div class="one"></div>
<div class="two"></div>


.one {
    height: 100px;
    width: 100px;
    background: #f00;
}

.two {
    height: 100px;
    width: 100px;
    background: #0f0;
    position: relative;
    top: -70px;
    left: 30px;
}

第二个你可以使用包裹在position: relative;容器中的position: absolute;

Demo 2

<div class="one">
    <div class="two"></div>
</div>

.one {
    height: 100px;
    width: 100px;
    background: #f00;
    position: relative;
}

.two {
    height: 100px;
    width: 100px;
    background: #0f0;
    position: absolute;
    bottom: -30px;
    left: 30px;
}

如果您有 2 个单独的元素，第一个示例很有用，您可以使用 position: relative; 并使用 top、right、bottom 和 left 属性相应地定位元素。

另一个示例使用position: absolute;，但您看到标记的变化了吗？我已将absolute 定位为child 元素，该元素嵌套在position: relative; 元素中。我更喜欢这个解决方案。

z-index 是可选的，如果你想在第二个元素上调出第一个元素

Demo

确保使用设置为relative absolute 或fixed 的position 属性，因为z-index 不适用于默认位置static。

另外我想在这里补充一下，我没有为Demo 2提供z-index解决方案，因为元素是嵌套的，所以你不能将子元素放在父元素后面，它继承父元素z-index

【讨论】：