Question

我正在为我的教会创建一个网站。因为他们不知道没有网络程序员，所以我用微薄的技能来处理它。我的问题只是安置问题。我试图在页面的左上角放置一个图像，但是，无论我做什么，它都会干扰页面上的其他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中，它仍会使事物移动。

有没有办法让页面以90％的宽度为中心，而其他所有内容都在包装div中，并且图像也在右上角？如果它需要一种不同类型的东西，有人可以帮我搞清楚吗？仅在一个浏览器中起作用的东西无济于事，因为我希望它能够为大多数人尽可能无缝地工作。

Answer 1

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

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

然而，这需要保持相对于你的包装器：

#wrapper { position:relative; }

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

Answer 2

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

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

这样就没有别的东西被移动了。

Answer 3

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

虽然如果你已经拥有一张背景图片，可能会让事情变得复杂一些。

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

3 个答案: