Javascript 在img顶部显示div

我有一个相对简单的HTML布局，其中div显示在img的顶部

但实际情况是div显示在图像下方。您知道如何将id为“main”的div显示在id为“mainImg”的img顶部（但div也需要居中/保持居中）

Kamalei-主页

您必须为您的div使用css属性

position:absolute

，然后篡改div的边距以正确定位它。

不要将图像作为内联标记引用，请尝试设置内容div本身的css背景属性。像这样的事情应该可以做到：

#main {
background-image:url('images/mainBackground.png');
background-repeat:no-repeat;
}

---

我强烈建议对div或body标记应用背景图像样式，而不是使用img标记作为站点背景。 这样，您就可以保持浮动布局&内容将显示在图像上方，因为您的#main div可以嵌套在应用了backgrund图像的元素中

例如，css是：

body { background:url('images/mainBackground.png'); }

只需从标记中删除img（#mainImg）标记

您可能还希望在导航时执行此操作

尝试以下操作：

#mainImg {
    left: 100px;/*adjust accordingly*/
    position: relative;
    top: 100px;/*adjust accordingly*/
    z-index: 2;
}

---

z索引用于分层html元素

当图像无法调整大小以适应不同大小的屏幕时，CSSSo的主要限制是您希望该图像根据用户的屏幕大小调整大小，这又如何呢？您可以始终使用媒体查询，您可以使用媒体查询根据用户的分辨率更改使用的图像这里有一篇关于媒体查询的文章：使用浏览器根据用户的窗口大小调整图像大小可能会使图像非常像素化

#mainImg {
    left: 100px;/*adjust accordingly*/
    position: relative;
    top: 100px;/*adjust accordingly*/
    z-index: 2;
}