1

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

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

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

如果有可能，那该怎么做？

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

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

4

1 回答 1

1

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

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

演示

<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: absolute;包裹在position: relative;容器内

演示 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;定位元素。toprightbottomleft

另一个例子使用position: absolute;了，但你看到标记的变化了吗？我已经定位absolute了child嵌套在元素内部的position: relative;元素。我更喜欢这个解决方案。

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

演示

确保您使用position的属性设置为relative absolute或fixed在默认位置z-index不起作用。static

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

于 2013-09-07T08:15:33.557 回答