Абсолютное позиционирование?

Question

[Артур Кох]

Доброй ночи хабраверстальщикам.

Требуется подсказать несвежей голове с позиционированием блока.



Дано:

фиксированный блок #managers-list, в котором расположен список фотографий.

При щелчке на фото должен появится абсолютный блок с информацией.(в примере обойдемся без события на щелчок)



так вот этот блок необходимо спозиционировать точно по центру над фото, но если блок в этом случае горизонтально выходит за рамки фиксированного #managers-list, нужно его подвинуть так, чтобы этого не происходило.



Пример тут — jsfiddle.net/PH6EK/5/



пы.сы. красный блок — стрелочка к блоку с инфой.

Answer 1

[Кирилл]

Это самое быстрое решение, которое пришло в голову.

$(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.

Ну и справа соответственно надо проверить.

Comments

[Артур Кох]

Спасибо, буду орудовать offset(), это то, что нужно.

Answer 2

[Виталий Киренков]

Если я правильно понял и всплывающая подсказка имеет фикс. ширину и вопрос только c вертикальным позиционирование то я бы сделал скрипт чутка другого формата.

var popup_h = $('div.manager').height();
var posTop = $(popup_h - $('#managers-list ul li').height())/2
popup_h.css('top': -posTop)

Ну и сделать проверку, что высота всплывашки больше чем блок с фоткой.

Comments

[Артур Кох]

вопрос как раз касается горизонтального позиционирования. блок должен быть максимально по центру горизонтально относительно фотографии, но при этом не выходить горизонтально за пределы контейнера.

[Виталий Киренков]

Тогда совсем просто: вместо top указать bottom: 100% и блок соответственно будет всегда над фоткой выводиться, независимо от кол-ва контента…

[Артур Кох]

вы немного не так поняли, позиционирование горизонтальное а не вертикальное
размеры окна фиксированные как по горизонтали так и по вертикали