HTML Position DIV Tag au TOP absolu

Question

.myDiv 
{ 

background-image: url(urltomyimgheader); 

height:100px; 

margin: auto; 

position:relative; 

top:-10px; 

width:600px; 

} 

C'est un simple balise div utilisé pour afficher le logo ...

J'ai fait en haut -10px faire toucher le haut du navigateur où à moins il y a un écart entre le logo et la page.

Cependant je me sens mal sur l'utilisation du -10px pour positionner le div :(Y at-il une meilleure solution compatible inter-navigateur?

Answer 1

@Tatu Ulmanen est juste que c'est une question par défaut du navigateur. Vous ne devriez pas avoir Pour ajouter des marges négatives, il vous suffit de définir l'attribut CSS par défaut des balises body/html. Pour être sûr, vous devriez utiliser une réinitialisation CSS pour se débarrasser des défauts de style Browser de toute façon. Voici le code que vous pouvez utiliser pour résoudre votre problème. Vous trouverez ci-dessous une belle réinitialisation CSS que vous pouvez ajouter au haut de toutes vos feuilles de style CSS à partir de maintenant.

html, body { 
padding: 0; 
margin: 0; 
} 

CSS Reset: /* Réinitialiser */

html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, font, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td 
         { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } 
    blockquote:before, 
    blockquote:after, 
    q:before, q:after { content: ""; } 
    blockquote, q  { quotes: "" ""; } 
    body    { line-height: 1; color: black; background: white; } 
    caption, th, td  { text-align: left; font-weight: normal; } 
    :focus    { outline: 0; } 
    table    { border-collapse: separate; border-spacing: 0; } 
    ol, ul    { list-style: none; } 

Answer 2

Oui, l'écart 10px est généré par rembourrages par défaut du navigateur pour certains éléments.

body { 
    padding: 0; 
} 

Vous pouvez également regarder dans les feuilles de style reset CSS pour réinitialiser tous les paramètres spécifiques du navigateur pour les éléments. Here's a good one.