Comment positionner dynamiquement une div sous une autre?

Je suis en train d'utiliser jQuery pour détecter la position d'un div (#olddiv), donc je peux utiliser cette position pour placer une autre div (#newdiv) exactement au-dessous. Le droit frontières de l'2 divs sont alignés (à droite).

Je vais essayer d'obtenir les #olddiv bas et à droite emplacements pour les utiliser comme #newdiv en haut et à droite des frontières. J'ai utilisé ce code, mais ça ne fonctionne pas. Toute idée de ce que je fais mal?

var right = $('#olddiv').position().right;
var top = $('#olddiv').position().bottom;
$('#newdiv').css('top', right);
$('#newdiv').css('right', top);

Aussi, je ne suis pas sûr si position est ce dont j'ai besoin. Je pense que cela peut être fait avec position ou offsetmais je ne suis pas sûr:

$('#ID').position().left
$('#ID').offset().left

Grâce

source d'informationauteur Fred

  1. 17

    J'ai utilisé offset() pour positionner les éléments de façon dynamique. Essayez ceci:

    var offset = $('#olddiv').offset();
var height = $('#olddiv').height();
var width = $('#olddiv').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('#ID').css( {
    'position': 'absolute',
    'right': right,
    'top': top
});

    aussi n'oubliez pas de lier cela à la window.onresize événement si vous en avez besoin à l'échelle lorsque l'utilisateur redimensionne la fenêtre.

    Mise à JOUR: une autre pensée - est-ce que avez à être en position absolue? Pourquoi ne pas insérer la div après les autres dans les DOM?

    $('#olddiv').after($('#ID').html());

    puis assurez-vous qu'ils sont de la même largeur.

  2. 10

    Il est assez cool plugin développés par le jQuery UI qui aide à position.

    Vous permet de faire quelque chose comme ceci:

    $(".menu").position({ my: "left top", at: "left bottom", of: ".menubutton" });
  3. 3

    Je l'ai utilisé que dans un site web que j'ai fait, pour afficher une div dans une certaine position, toujours par rapport à une autre div, et toujours par rapport aux dimensions de la fenêtre du navigateur (même lorsque vous étirer manuellement).

    Voici le code:

    //function to place the div
var newdiv = function () {
   var o = $('#olddiv').offset();
   var h = $('#olddiv').height();
   var w = $('#olddiv').width();
   $('#newdiv').css({'top': o.top,
                     'left': o.left,
                     'width': w,
                     'height': h       
   }).show();
}

//listen the window changes and correct the newdiv position
$(window).resize(function(){ newdiv(); });

//display the newdiv after DOM is loaded, or whenever you want
newdiv();

    Notez que vous devrez peut-être ajouter un autre vars pour le css ci-dessus, comme les margin, padding, etc, afin d'avoir la bonne position, ou même d'ajouter manuellement des valeurs à haut et à gauche, dans le cas où le nouveau div n'est pas exactement comme l'ancienne.

  4. 0

    Regarde comme une faute de frappe, le fait de fixer:

    'top', right
'right', top

    d'aide?

    Les divs doivent être positionnés de manière absolue ou relative dans l'ordre pour que ce code fonctionne aussi bien.