Question

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

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

例如我有“木板”元素，我有另一个元素“棍棒”.. 我想在“木板”元素背后的“棒”元素..所以它就像一个广告牌风格：D （如果在Photoshop中，我们只需将图层“粘贴”拖动到图层“板”下面

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

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

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

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

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和{{1}相应地定位元素属性。

另一个示例使用left，但您是否看到了标记的更改？我找到了position: absolute; absolute元素，它嵌套在child元素中。我更喜欢这个解决方案。

position: relative;是可选的，例如，如果你想要第二个元素超过第二个

Demo

请确保您使用z-index设置为position relative或absolute的{{1}}属性，因为fixed不适用于z-index是默认位置。

另外我想在这里补充一下，我没有为演示2提供static解决方案，因为元素是嵌套的，所以你不能将子元素放在父元素后面，它继承了父元素{{1 }}

CSS中的元素位置

1 个答案: