YouTip

Position an element relative to the window, document, anchor, cursor/mouse, etc. For more details about the `.position()` method, please see the API documentation [.position()](#). ## Default Functionality Configure the position using form controls, or drag the positioned element to modify its offset. Drag the parent element around to see collision detection. #parent { width: 60%; height: 40px; margin: 10px auto; padding: 5px; border: 1px solid #777; background-color: #fbca93; text-align: center; } .positionable { position: absolute; display: block; right: 0; bottom: 0; background-color: #bcd5e6; text-align: center; } #positionable1 { width: 75px; height: 75px; } #positionable2 { width: 120px; height: 40px; } select, input { margin-left: 15px; } $(function() { function position() { $( ".positionable" ).position({ of: $( "#parent" ), my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } $( ".positionable" ).css( "opacity", 0.5 ); $( "select, input" ).bind( "click keyup change", position ); $( "#parent" ).draggable({ drag: position }); position(); }); ## Image Carousel A prototype photo browser that uses Position to place images on the left, center, and right, then cycles through them. Use the links at the top to cycle the images, or click on the left or right side of an image to cycle the images. Note that the images are repositioned when the window is resized. body { margin: 0; } #container { overflow: hidden; position: relative; height: 400px; } img { position: absolute; } $(function() { // Refactor the widget, remove these plugin methods $.fn.left = function( using ) { return this.position({ my: "right middle", at: "left+25 middle", of: "#container", collision: "none", using: using }); }; $.fn.right = function( using ) { return this.position({ my: "left middle", at: "right-25 middle", of: "#container", collision: "none", using: using }); }; $.fn.center = function( using ) { return this.position({ my: "center middle", at: "center middle", of: "#container", using: using }); }; $( "img:eq(0)" ).left(); $( "img:eq(1)" ).center(); $( "img:eq(2)" ).right(); function animate( to ) { $( this ).stop( true, false ).animate( to ); } function next( event ) { event.preventDefault(); $( "img:eq(2)" ).center( animate ); $( "img:eq(1)" ).left( animate ); $( "img:eq(0)" ).right().appendTo( "#container" ); } function previous( event ) { event.preventDefault(); $( "img:eq(0)" ).center( animate ); $( "img:eq(1)" ).right( animate ); $( "img:eq(2)" ).left().prependTo( "#container" ); } $( "#previous" ).click( previous ); $( "#next" ).click( next ); $( "img" ).click(function( event ) { $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).resize(function() { $( "img:eq(0)" ).left( animate ); $( "img:eq(1)" ).center( animate ); $( "img:eq(2)" ).right( animate ); }); });