CSS div 放置图像而不干扰其他 div答案

【问题标题】：CSS div to place image without interfering with other divsCSS div 放置图像而不干扰其他 div
【发布时间】：2009-10-04 10:32:47
【问题描述】：

我正在为我的教会创建一个网站。因为他们知道没有网络程序员成员，所以我用我微薄的技能来处理它。我的问题只是安置之一。我试图将图像放在页面的左上角，但是，无论我做什么，它都会干扰页面上的其他 div 元素。这是我当前的 CSS：

body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 90%;
background-color:#ffffff;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid blue;
}
div#image {
padding: 15px;
margin: 0px;
float: left;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 100px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 100px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid blue;
text-align: center;
}

无论我如何定义图像 div，它总是使主 div、导航 div 和标题 div 不对齐。如果我只是将图像放在另一个 div 中，它仍然会使事情发生变化。

有什么方法可以让页面以 90% 的宽度居中，并将其他所有内容都放在包装器 div 中，并且在右上角也有图片？如果它需要不同类型的东西，有人可以帮我弄清楚吗？只在一个浏览器中运行的东西无济于事，因为我希望它尽可能无缝地为大多数人运行。

【问题讨论】：

标签： html css

【解决方案1】：

您可能希望使用绝对定位，

#image { position:absolute; top:0; left:0; }

但是，这需要保持相对于您的包装器：

#wrapper { position:relative; }

虽然我是严格猜测，但提供更多信息，您将获得更明确的解决方案。

【讨论】：

这几乎正是我正在寻找的，除了有没有办法让图像不在 0、0 而是 10、10？我尝试将其更改为 top:10;left:10;但它根本不动。

【解决方案2】：

使用 z-index 将图像放在更高的层上。

http://www.w3schools.com/Css/pr_pos_z-index.asp

这样不会移动其他任何东西。

【讨论】：

假设他在谈论#image，它首先需要一个除静态之外的位置，以便 z-index 的堆叠顺序效果发生。
没错，我忘了说那部分了。

【解决方案3】：

如果您不希望它影响页面上的任何其他内容，我可以检查它是否不是背景图片吗？如果不是，那么您是否尝试过制作它作为背景图片？这样它就不会/不能影响文档流，也不会因此而移动任何内容。

虽然如果您已经有一张背景图片，它可能会使事情变得有点复杂。

【讨论】：