5568 sujets

Sémantique web et HTML

Alignement absolute relative et Border.

Bonjour à tous,

Je souhaite aligner deux block un en relative et l'autre en absolute.
Ces deux block on des bordures, et si je l'aligne avec 
right: 0px;

la bordure n'est pas pris en compte.
J'ai chercher dans les doc et je ne comprend pas.
Il y a bien la solution:
right : -Xpx;
oú X prend la valeur de l'épaisseur de la bordure.

je vous montre un exemple:
<html>
  <head>
    <title></title>
    <meta content="">
    <style>
    	#rel{
			position: relative;
			display: inline-block;
			width:240px;
			height: 100px;
			color:#ba5b59;
			background-color: #eee;
			border-left: 4px solid #222;
			border-right: 4px solid #222;
			border-bottom: 4px solid #222;		
    	}
    	    	#abs{
			z-index: 10;
			position: absolute;
			right: 0px;
			top: 90px;
			width: 240px;
			background:#e0e;
			border-left: 4px solid #222;
			border-right: 4px solid #222;
			border-bottom: 4px solid #222;		

    	}
    </style>
  </head>
  <body>
  	<div id="rel">
  		relative
  		<div id="abs">
  			absolute
  		<div>
  	</div>

  </body>
</html>


Merci à vous
Bonjour,

C'est un comportement normal puisque par défaut la bordure est à l'extérieur du bloc - elle n'entre pas en compte dans le calcul des dimensions du bloc, et par conséquent le positionnement n'en tient pas compte.

Tu peux corriger ça avec :

#rel, #abs {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


Et le support navigateur est très correct. Cette instruction permet d'intégrer les bordures au calcul de dimensions du bloc, et par conséquent le positionner plus finement.

Bonne continuation !
Ha oui autant pour moi !!

J'étais persuadé que le système de positionnement était logique, et en fait non. Il est précisé que les éléments positionnés le sont en fonction de la boîte initiale ( i.e. sans tenir compte des marges internes, bordures, marges externes et bordures externes ).

Ça n'est en général pas gênant puisque le décalage effectué sur la boîte elle-même déplace également ces propriétés dépendantes, mais dans ton cas la position de ton second élément se fait également en fonction de la boîte initiale - et donc toujours sans les bordures et marges.

Un petit exemple permet de découvrir qu'en appliquant un padding à ton élément relatif et sans positionner horizontalement ton élément absolu, il se mettra naturellement dans son parent sans tenir compte du padding.

Le plus joli dans tout ça, c'est que mon idée de changer le modèle de calcul des dimensions ne change rien pour la simple raison que la spécification est claire: le positionnement ne se fait qu'en fonction de la boîte initiale, sans tenir compte de ses dimensions mais uniquement de ses côtés.

Conclusion : j'ai malheureusement peur que tu ne soies obligé de jouer avec right/left comme tu l'as déjà vu. Une autre idée serait de rajouter un élément parent commun, en position relative, et de positionner les deux enfants à gauche / droite de la même manière, afin d'assurer leur alignement sans trop de bidouilles ni dépendances aux bordures.

Désolé pour cette réponse qui n'aide pas vraiment !!
Modifié par Ten (23 Jan 2013 - 11:10)
Sujet clos
Aller à