CSS div для размещения изображения, не мешая другим div

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, main и навигацию и заголовок из выравнивания. Если я просто помещу изображение в другой раздел, оно все равно заставляет двигаться.

Можно ли как-нибудь центрировать страницу с шириной 90% и всем остальным в div обертки, а также иметь изображение в верхнем правом углу? Если это потребует другого типа вещей, может кто-нибудь помочь мне разобраться? Что-то, что работает только в одном браузере, не поможет, так как я хочу, чтобы это работало как можно более плавно для большинства людей.

Answer 1

Возможно, вы хотите использовать абсолютное позиционирование,

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

Однако, это должно остаться относительно вашей оболочки:

#wrapper { position:relative; }

Хотя я строго предполагаю, предоставьте больше информации, и вы получите более точное решение.

Answer 2

Если вы не хотите, чтобы это влияло на что-либо еще на странице, могу ли я просто проверить, что это не фоновое изображение? Если это не так, вы пробовали сделать фоновым изображением? Таким образом, это не повлияет / не повлияет на поток документов, и из-за этого ничего не будет перемещено.

Хотя, если у вас уже есть одно фоновое изображение, это может немного усложнить ситуацию.

Answer 3

Используйте z-index, чтобы поместить изображение на верхний слой.

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

Таким образом, больше ничего не перемещается.