HTML pourquoi ces deux éléments ne sont pas positionnés directement l'un sur l'autre?

Question

J'essaie d'écrire du code HTML pour superposer un autre élément directement au-dessus d'un bloc de texte pre.

Le problème est, même l'exemple le plus simple ne semble pas aligner correctement ...

<div style="position:relative"> 
<pre style="position:absolute"> 
hello 
</pre> 
    <div style="position:absolute"> 
    world 
    </div> 
</div> 

Vous pouvez voir la sortie here. L'élément div est rendu au-dessus de l'élément pre. Pourquoi cela arrive-t-il?

Vous trouverez plus d'informations sur le positionnement des éléments here.

Answer 1

La balise pre a une marge de margin: 1em 0px; par défaut de sorte que vous devez définir les marges à zéro pour remplacer cette . Ensuite, il y a encore une petite quantité d'écart après cela. C'est à cause de la police. Dans mon exemple. J'ai remplacé le font-family pour hériter le font-family du parent afin que les éléments soient parfaitement alignés. Une autre chose est, le même effet vice versa peut être fait pour font-family pour la balise div au lieu de la balise pre

pre{ 
 
margin:0px; 
 
font-family:inherit; 
 
}

<div style="position:relative"> 
 
<pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute"> 
 
    world 
 
    </div> 
 
</div>

Answer 2

En fait, l'élément div est "rendu" au-dessus de l'élément pre. Nous ne sommes tout simplement pas capables de le voir. J'ai ajouté un attribut border de css pour le visualiser en raison de la "marge préalable".

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red;"> 
 
    world 
 
    </div> 
 
</div>

Cela dit, vous pouvez ajouter un peu css de passer un peu et obtenir ce que vous voulez, comme ça !!

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red; top: 7px"> 
 
    world 
 
    </div> 
 
</div>

espoir qui aide !! Aussi, je suis venu à savoir que la balise pre a une valeur par défaut margin en haut. Pour voir ça vérifier ça !!

Cocher cette Fiddle

Donc, pour enlever cela, facile, mettre margin à 0. Fiddle