Absolute positioning?

Question

css

Good night habraverstalshchik.
It is required to prompt a stale head with the positioning of the block.

Given:
a fixed #managers-list block containing a list of photos.
When you click on the photo, an absolute block with information should appear. (In the example, we will do without a click event)

, so this block must be positioned exactly in the center above the photo, but if the block in this case horizontally goes beyond the fixed #managers-list, you need it move it so it doesn't happen.

An example here is jsfiddle.net/PH6EK/5/py.sy

. red block - arrow to the block with info.

Answer 1

This is the fastest solution that came to mind.

$(function() {
  $('.manager').each(function() {
    if($('#managers-list ul').offset().left > $(this).offset().left) {
      $(this).css('left', '0px');
    }
  });
});
* This source code was highlighted with Source Code Highlighter.

Well, on the right, respectively, you need to check.

Answer 2

If I understand correctly, the tooltip has a fix. width and the question is only with vertical positioning, then I would make a script in a slightly different format. Well, check that the height of the pop-up is greater than the block with the photo.
var popup_h = $('div.manager').height();
var posTop = $(popup_h - $('#managers-list ul li').height())/2
popup_h.css('top': -posTop)