Div position z-index. Помогите
 

Уважаемые ГУРУ, помогите новичку ...
Работала конструкция ...
div position relative
в нём была таблица, в каждой ячейке загружалось img, к которой по id привязывался div position absolute z-index=100 (всплывающее меню ul-li).
При наведении мыши на img всплывало меню в центре картинки.
Решил убрать из конструкции таблицу ...
Остальные данные не менял. Только поудалял все tr и td. Теперь при наведении мыши на img всплывающее меню появляется, но оно прижато к левому краю body, а по вертикали работает нормально.
Что могло произойти? Почему конструкция перестала работать?
Заранее спасибо!

Верни div position relative. Ну или обёртке меню назначь position relative.

Уважаемые ГУРУ, помогите новичку ...
Работала конструкция ...

div position relative
в нём была таблица, в каждой ячейке загружалось img, к которой по id привязывался div position absolute z-index=100 (всплывающее меню ul-li).
При наведении мыши на img всплывало меню в центре картинки.
Решил убрать из конструкции таблицу ...
Остальные данные не менял. Только удалил все tr и td. Теперь при наведении мыши на img всплывающее меню появляется, но оно прижато к левому краю body, а по вертикали работает нормально.
Что могло произойти? Почему конструкция перестала работать?
Заранее спасибо!

Вот сам текст ...
CSS
.content { position: relative; overflow: auto; }
.popmnu { z-index: 100; display: none; position: absolute; margin-top: -50px; padding-left: 70px; }
HTML
<div class="content">
<img src='images/flag.png' onmouseover=Popmenu('flagA') />
<div class='popmnu' id='flagA'>
<ul>
<li><a href='1.html'>город 1</a></li>
<li><a href='2.html'>город 2</a></li>
</ul>
</div>

Меня пугает margin-top: -50px; padding-left: 70px;, зачем это вообще нужно?
CSS:

.content {
    position: relative;
    overflow: auto; }
.popmnu {
    z-index: 100;
    display: none;
    position: absolute;
    top: 0;
    left: 0; }

HTML:

<div class="content">
    <img src='images/flag.png' onmouseover=Popmenu('flagA') />
    <div class='popmnu' id='flagA'>
        <ul>
            <li><a href='1.html'>город 1</a></li>
            <li><a href='2.html'>город 2</a></li>
        </ul>
    </div>
</div>

Ты </div> пропустил может в этом проблема, а может из-за margin. А лучше сделай это без JS. Вот тебе простой пример без JS http://jsfiddle.net/gu7e425y/.

"margin-top: -50px; padding-left: 70px;" нужны чтобы на картинке с размерами 140 * 100 текст всплывал посередине картинки

а JS нужна только для слежения за мышкой ... onmouseover

А не проще использовать свойства left, top? А для центрирования flex-box, с дочерним элементом margin: auto;

При top: 0; left: 0; - окно всплывает в левом верхнем углу div content, а мне надо, чтобы оно всплывало на текущей картинке ... а их, например 6 рядов по 8 штук ...

Ну с этим и css справиться. Вот представь ситуацию когда на твой сайт зайдёт пользователь и у него будет отключен JS. (Я иногда отключаю, с целью экономии трафика)

А CSS hover не вариант?