Question

此刻我陷入了一种困境。

如果你去我的网站......

http://dekkro.no-ip.org/

您将看到一张图片，并在其下方显示一个div。我花了几个小时试图将这两个位置放在页面的中间位置，底部的div重叠在图像上。

我失败了，失败了，我在这里做错了什么？我使用了z-index和定位，但它从未居中。

谢谢！

Answer 1

哇，这个页面上有很多代码。

没有审查所有内容（稍后会有） - 您是否尝试将主图像设置为div的背景图像，然后简单地将日志放入其中？

CSS

#image-div { background-image:url('yourimage.jpg'); }

HTML：

<div id="image-div">
    <div id="form-div">
    form...
    </div>
</div>

Answer 2

所有你需要的是：

CSS：

#my_img {
    margin:auto;
    display:block;
}

#my_div {
    margin:auto;
    position:relative;
    top:-100px;
    z-index:2;
}

HTML：

<img id="my_img" src="http://dekkro.no-ip.org/images/testimage.png" />
<div id="my_div">whatever</div>

以下是演示：http://jsfiddle.net/tX2JY/embedded/result/

Answer 3

假设一个div的宽度为w1，高度为h1;其他w2，h2

#div1 {
   position:absolute; top:50%; left:50%; margin-left: - w1/2px; margin-top:-h1/2px;
}

#div2 {
   position:absolute; top:50%; left:50%; margin-left: - w2/2px; 
   margin-top:-h2/2px; z-index:9999;
}

div与z-index重叠

3 个答案: