Comment positionner div à la position absolue?

J'essaie de déplacer ma div à l'endroit exact (en pixels) que je veux (les coordonnées devraient être relatives à la div des parents).Comment positionner div à la position absolue?

J'ai essayé d'écrire ceci:

<body> 
    <div id="desk" style="position: absolute; width:400; height:400; background-color:blue;" > 
     <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;" /> 
     <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;" /> 
    </div> 
</body>

Voici deux places dans (51,1) et (1,51) coordonnées.

Je l'ai attendu à obtenir ceci:

expected

mais ai eu ce:

enter image description here

Pourquoi? Qu'est-ce que je fais mal et comment cela peut-il être fait correctement?

P.S. 'fixed' au lieu de 'absolute' fera le travail, mais les carrés ne sont pas placés sous div div et ne répondent pas au défilement. Y a-t-il un moyen de le réparer?

Source

2012-10-26 Arenim

Browser - chromium-browser, ubuntu 12.04 – Arenim

Cela fonctionne pour moi:

<div id="desk" style="position: relative; width:400px; height:400px; background-color:blue;" > 
    <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;"></div> 
    <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;" ></div> 
</div>

Fermer <div> tags. Il pense que le 2-ème div est l'enfant du 1 er.
px Utilisation dans width:400px; height:400px;

Source

2012-10-26 15:24:39 user4035

"Rendre la position div bleue: relative" - Pour être un bloc conteneur, la propriété de position doit être définie sur quelque chose qui n'est pas "statique". C'est "absolu" donc il n'est pas nécessaire de le changer en "relatif". – Quentin

vous avez raison. Je vais retirer cet article. – user4035

Vous avez laissé les balises de fin de vos divs, alors cell2 est à l'intérieur cell1 et est ainsi positionné par rapport aux bords de cell1 et non desk.

Vous ne pouvez pas utiliser la syntaxe de balise XML à fermeture automatique en HTML.

Source

2012-10-26 15:22:09 Quentin

Voici un violon: http://jsfiddle.net/GvQ3x/

Fermez votre div (<div></div> au lieu de <div />) balises, utilisez également px (ou quoi que ce soit d'autre) lorsque vous souhaitez définir votre conteneur taille div

Source

2012-10-26 15:23:35 udidu

Vous devez fermer vos balises DIV correctement:

<body> 
    <div id="desk" style="position: absolute; width:400; height:400; background-color:blue;" > 
     <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;"></div> 
     <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;"></div> 
    </div> 
</body>

Example fiddle

Source

2012-10-26 15:24:35

Merci, c'est. J'écris _html_, pas _xhtml_, et je l'ai oublié. – Arenim

Comment positionner div à la position absolue?

Répondre

Questions connexes