Comment faire pour que la position de div soit relative à une seule div?

Par exemple, j'ai un div "position", et j'ai un div appelé "A", un div appelé "B". Je voudrais à la fois "A", la position de "B" est relative à "position" div. Par exemple, la position div est 100, 100 en valeur absolue, et une position est "position" 'sx - 100, "position"' sy - 100, ... ce qui signifie qu'elle est dans 0, 0 en valeur absolue. La position B est la "position" de x + 100, "position" de y + 100, ... ce qui signifie qu'elle est en 200, 200 en valeur absolue.Comment faire pour que la position de div soit relative à une seule div?

Mais lorsque la fenêtre redimensionne, ou position div, déplacez, je voudrais laisser le «A», et «B» suivent la position de «position». Par exemple, si la "position" à 500, 500. La position A devrait être 400, 400. Et la position B devrait être 600, 600.

Comment puis-je laisser la position "A", et "B", suite à la div "position" en utilisant css seulement? Je vous remercie.

Le code est quelque chose comme ça, parce que le « A » et « B » est pas dans l'arbre dom « position », il est différent d'utiliser le parent/hériter dans le positionnement:

<body> 
     <div id="A"></div> 
     <div id="position"></div> 
     <div id="B"></div> 
</body>

Source

2010-12-05 Tattat

à fais ça ... le div A et B devrait être dans la div "position". Alors div "position" devrait avoir position:relative et A, B devrait être position:absolute. Si votre div "position" doit être absolu, pensez à utiliser divs wrapper.

Lorsque vous définissez la position absolue, cela signifie que les attributs haut, bas, gauche et/ou droit seront relatifs au premier parent qui a position:relative .. par défaut l'étiquette de corps est en position relative ... see this

maintenant .... si vous ne voulez pas insérer les A et B en "position" .. alors vous aurez besoin de javascript pour calculer le les positions actuelles et de les changer ..

Bonne chance

BTW: essayez d'utiliser de meilleurs noms pour votre divs = P son confus lorsque vous essayez d'expliquer la position d'un div "position"

Source

2010-12-05 17:10:52 pleasedontbelong

<html> 
<head> 
<style> 
div { 
    height: 200px; 
    width: 200px; 
} 
#position { 
    position: absolute; 
    top: 400px; 
    left: 400px; 
    background-color: #444; 
} 
#A { 
    position: relative; 
    top: -100px; 
    left: -100px; 
    background-color: #e00; 
} 
#B { 
    position: relative; 
    top: -100px; 
    left: 100px; 
    background-color: #0ee; 
} 
</style> 
<body> 
    <div id="position"> position 
      <div id="A">A</div> 
      <div id="B">A</div> 
    </div> 
</body> 
</html>

Source

2010-12-05 17:23:19

mais je ne veux pas le "A" et "B" à l'intérieur de la "position", puis-je faire? – Tattat

Que voulez-vous dire par à l'intérieur? Ils peuvent être déplacés où vous voulez, et vous pouvez changer ce qui est en haut avec 'z-index' (donc, désolé pour le long temps de réponse :) –

Comment faire pour que la position de div soit relative à une seule div?

Répondre

Questions connexes