CSS div pour placer l'image sans interférer avec d'autres divs

Question

Je crée un site web pour mon église. Parce qu'ils ne connaissent pas de web programmeur, je m'en occupe avec mes maigres compétences. Mon problème est simplement celui du placement. J'essaie de placer une image en haut à gauche de la page, mais, quoi que je fasse, cela interfère avec les autres éléments div sur la page. Ceci est mon CSS actuel:

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; 
} 

Peu importe comment je définir le div d'image, il pousse toujours les principaux, la navigation et divs d'en-tête hors de l'alignement. Si je place juste l'image dans un autre div, cela fait bouger les choses.

Y a-t-il un moyen d'avoir la page centrée avec une largeur de 90% et tout le reste dans le div wrapper, et aussi avoir l'image dans le coin en haut à droite? Si cela nécessite un type de chose différent, quelqu'un peut-il m'aider à le comprendre? Quelque chose qui ne fonctionne que dans un seul navigateur n'aidera pas, car je veux que cela fonctionne de manière aussi transparente que possible pour le plus grand nombre de personnes.

Answer 1

Vous cherchez peut-être utiliser le positionnement absolu,

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

Cependant, cela devra rester par rapport à votre emballage:

#wrapper { position:relative; } 

Bien que je devine strictement, fournir plus d'informations et vous obtiendrons une solution plus définitive.

Answer 2

Utilisez z-index pour placer l'image sur un calque supérieur.

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

Rien de façon autre obtient déplacé.

Answer 3

Si vous ne voulez pas que cela affecte quelque chose sur la page, puis-je vérifier que ce n'est pas une image de fond? Si ce n'est pas, alors avez-vous essayé faisant une image de fond? De cette façon, cela ne va pas/ne peut pas affecter le flux de documents et rien ne sera déplacé à cause de cela. Bien que si vous avez déjà une image d'arrière-plan, cela peut compliquer un peu les choses.