CSS div to place an image without interfering with other divs

Question

I am creating a website for my church. Since they don't know a single member of the web programmer, I take care of this with my meager skills. My problem is just posting. I am trying to put an image in the upper left corner of the page, but no matter what I do, it interferes with other div elements on the page. This is my current 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;
}

No matter how I define a div div, it always pushes the main, navigational and heading divs out of alignment. If I just put the image in another div, it still makes everything move.

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

If you do not want this to affect anything else on the page, can I just check that this is not a background image? If this is not the case, do you try making a background image? Thus, it will not / cannot affect the flow of the document, and because of it, nothing will be moved.

Although, if you already have one background image, this can complicate things a bit.