Question

<body style = "background-color: yellow">
<div style = "background-color: red; width: 300px; height: 300px">
</div>
<div style = "background-color: green; width: 300px; height: 300px; top: -200px; position: relative;">
</div>
<div style = "background-color: orange; width: 300px; height: 300px">
</div>
</body>

https://jsfiddle.net/e2n32pof/问题

为糟糕的图表道歉，如果您想篡改该页面，我已将其设置为：

http://amigoscardiff.co.uk/contact

我在Wordpress网站上工作。它使用的是一体化主题之一，我不具备使用CSS排除的丰富经验。我有三个元素，我试图以某种方式组合在一起。实质上，第一个元素是位于标题下方的图像。第二个元素是将覆盖第一个图像的图像。第三个是位于第一个元素下方的元素。见下图：

enter image description here

目前，我对定位属性的体验非常微弱，过去几乎不需要叠加图像。从我所读过的内容来看，如果我这么说，那么所有位置属性仍会留下一个空白空间：

＆＃34; top：-100px＆＃34;。

我不确定如何解决这个问题，尤其是在不使用原始html文件进行尝试和排除故障时。任何澄清都会很棒，或者如果有其他方法可以解决问题，那么我很乐意听到它。

Answer 1

我没有完全理解你的问题，但其中一个希望有所帮助：

https://jsfiddle.net/roLzL23n/

<div style = "background-color: red; width: 300px; height: 300px">
</div>
<div style = "background-color: green; width: 300px; height: 300px; top: -200px; position: relative;">
</div>
<div style = "background-color: orange; margin-top: -200px; width: 300px; height: 300px">
</div>

或者

https://jsfiddle.net/ftees7jt/

<div style = "background-color: red; width: 300px; height: 300px">
</div>

<div style = "background-color: green; width: 300px; height: 300px; margin-top: -200px;">
</div>

<div style = "background-color: orange; margin-top: -200px; width: 300px; height: 300px">
</div>

CSS定位元素叠加（Wordpress主题）

1 个答案: