Quel CSS par défaut m'empêche de chevaucher complètement deux éléments avec un positionnement relatif?

Pourquoi ne pas #img1 et #canvas1 chevauchent complètement le code suivant? Je les veux exactement au même endroit. Je superpose des images avec une animation javascript sur toile. Les premières réflexions étaient que les paramètres de remplissage ou de marge par défaut interféraient quelque part. J'ai essayé de mettre à zéro pour tous les éléments - cela ne fonctionne pas. Je comprends que position:relative positionne un élément relatif à sa position normale. Il est clair que manquant un paramètre par défaut ou quelque chose d'évident ..Quel CSS par défaut m'empêche de chevaucher complètement deux éléments avec un positionnement relatif?

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .chapter { 
 
     width: 90%; 
 
     margin: 0 auto; 
 
     max-width: 1000px; 
 
     border: 1px solid red; 
 
    } 
 
    
 
    #img1 { 
 
     border: 1px solid green; 
 
     position: relative; 
 
     left: 50px; 
 
     height: 100px; 
 
     width: 100px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    
 
    #canvas1 { 
 
     border: 1px solid blue; 
 
     position: relative; 
 
     left: -50px; 
 
     height: 100px; 
 
     width: 100px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="template" id="T2"> 
 
    <div class="chapter" id="C2"> 
 
     <h1>Why can't I overlap the below elements?</h1> 
 
     <img src="" id="img1" /> 
 
     <canvas id="canvas1"></canvas> 
 
    </div> 
 
    </div> 
 

 
</html>

Source

2017-09-05 DVCITIS

deux choses à faire:

1.) Ne pas laisser un saut de ligne ou de l'espace entre les deux éléments dans le code HTML (voir ci-dessous)

2.) Définissez le paramètre left pour le canevas sur -52px - vous devez prendre en compte le bord 2 x 1px de l'image.

.chapter { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    max-width: 1000px; 
 
    border: 1px solid red; 
 
} 
 

 
#img1 { 
 
    border: 1px solid green; 
 
    position: relative; 
 
    left: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#canvas1 { 
 
    border: 1px solid blue; 
 
    position: relative; 
 
    left: -52px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div class="template" id="T2"> 
 
    <div class="chapter" id="C2"> 
 
    <h1>Why can't I overlap the below elements?</h1> 
 
    <img src="" id="img1" /><canvas id="canvas1"></canvas> 
 
    </div> 
 
</div>

Source

2017-09-05 19:57:19 Johannes

ah bien sûr. Complètement oublié de mes frontières. merci – DVCITIS

@Johannes J'ai essayé de le résoudre, j'ai un doute, la balise 'img' a aussi des bordures droites, cela ressemble trop à l'élément' canvas', alors pourquoi devrions-nous augmenter les pixels pour 'canvas' seul? –

@NarenMurali Parce que l'image a une largeur de 52px incluant les bordures, la toile devrait normalement (sans le paramètre 'left') commencer à 52px par la gauche, donc elle doit être déplacée 52px vers la gauche pour couvrir exactement l'image. – Johannes

#img1 { 
border: 1px solid green; 
position: relative; 
left: 56px; 
height: 100px; 
width: 100px; 
margin: 0px; 
padding: 0px; 
}

cela a fonctionné ...

Source

2017-09-05 19:56:24

La question est pourquoi? Je peux ajouter des pixels à aligner mais je veux savoir pourquoi j'ai besoin de faire ça? – DVCITIS

Il existe des moyens certainement mieux pour obtenir l'effet que vous allez pour, mais pour répondre à votre question, je crois que l'espacement est dû à la taille de la police par défaut sur l'élément parent. Définissez la taille de police à 0px sur le div div et vous pouvez voir les éléments se chevauchent maintenant.

Source

2017-09-05 20:01:15 rmurph46

Quelques remarques:

utilisation box-sizing: border-box pour le dimensionnement plus 'facile'. Avec border-box, la largeur de la bordure et le rembourrage sont soustraits de la tête élémen- taire qui y est ajoutée. Un élément avec width: 100px, un border-width de 1px et un padding de 10px sera de 100 + (2 * 1) + (2 * 10) = 122px large sans box-sizing: border-box mais l'élément sera 100px large, même avec la border-width et padding lorsque le box-sizing est défini sur border-box. Voir ici pour une explication (meilleure) plus détaillée: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
En essayant de chevaucher un élément, je trouve qu'il est plus facile de garder l'élément du conteneur le plus vide possible. La suppression de l'élément h1 rend le chevauchement beaucoup plus gérable.
Remplacez le position de l'élément canvas par absolute. De cette façon, il ne prend plus place dans le DOM et il est positionné dans le conteneur supérieur gauche de son parent de positionnement (dans votre exemple le div.chapter dans ma réponse le div.container). Cela aide également lorsque vous essayez d'aligner les éléments.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    position: relative; 
 
} 
 

 
.chapter { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    max-width: 1000px; 
 
    border: 1px solid red; 
 
} 
 

 
#img1 { 
 
    border: 1px solid green; 
 
    position: relative; 
 
    left: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#canvas1 { 
 
    border: 1px solid blue; 
 
    position: absolute; 
 
    left: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div class="template" id="T2"> 
 
    <div class="chapter" id="C2"> 
 
    <h1>Why can't I overlap the below elements?</h1> 
 
    <div class="container"> 
 
     <img src="" id="img1" /> 
 
     <canvas id="canvas1"></canvas> 
 
    </div>  
 
    </div> 
 
</div>

Source

2017-09-05 20:13:52 Thijs

Ha, merci pour cela, très utile - Je ne pense pas que le dimensionnement des boîtes existait quand je suis resté coincé dans CSS. – DVCITIS

'box-sizing' est l'une de mes propriétés CSS préférées, cela rend la vie (d'un développeur frontend) tellement plus facile! – Thijs

Quel CSS par défaut m'empêche de chevaucher complètement deux éléments avec un positionnement relatif?

Répondre

Questions connexes