Get the Position of a Div/Span Tag

Get the position of a div/span tag

This function will tell you the x,y position of the element relative to the page. Basically you have to loop up through all the element's parents and add their offsets together.

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

However, if you just wanted the x,y position of the element relative to its container, then all you need is:

var x = el.offsetLeft, y = el.offsetTop;

To put an element directly below this one, you'll also need to know its height. This is stored in the offsetHeight/offsetWidth property.

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

How to position div relatively to a span?

Maybe u want this? If you want to make dropdown menu do it other way

.hidden-word{  position:absolute;  visibility:hidden;  font-size:11px;}
.word{  display:inline-block;}.word:hover > .hidden-word{  visibility:visible;}

<div>  <span>Blah blah...</span>  <span class="word">some word     <div class="hidden-word">Hidden word</div>  </span>  <span>Bluh bluh...</span></div>

move span element right to div tag

<div style='width:600px;padding-top: 2px;padding-bottom: 1px;border:1px solid red;'>  <span style='padding-left: 25px'>" + rank + "</span >  <span style='padding-left: 35px'><img id='img1' class='img-rounded' alt='' width='50' height='50' src='test.jpg' /></span>  <span style='padding-left: 30px' >" + o.Title + "</span>  <span style='float:right'>{IMG}<img class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />  </span> </div >

get coordinates of the character in a span in context of the container div

To get the coordinates of a word, it must be wrapped in an element first

$('.container').html(function(_, html) {
    return html.replace('standard', '<span class="standard">standard</span>');
});

Then you get the offset() position of that element relative to the document, or relative to the parent element with position()

var position = $('.standard').offset();

FIDDLE

Get the Position of a Div/Span Tag