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 не вариант?

я в твой пример вставил ещё одну картинку с таким же дивом ... и всплывает окошко только в одном ми том же месте, вне зависимости на какой картинке мыша

<div class="content">
<img src='https://www.google.ru/logos/doodles/2015/42nd-anniversary-of-the-official-recognition-of-the-letter-5644871192805376.3-res.png' alt="image" />
<div class='popmnu'>
<ul>
<li><a href='1.html'>город 1</a></li>
<li><a href='2.html'>город 2</a></li>
<li><a href='1.html'>город 3</a></li>
<li><a href='2.html'>город 4</a></li>
</ul>
</div>

<img src='https://www.google.ru/logos/doodles/2015/42nd-anniversary-of-the-official-recognition-of-the-letter-5644871192805376.3-res.png' alt="image" />
<div class='popmnu'>
<ul>
<li><a href='1.html'>город А</a></li>
<li><a href='2.html'>город И</a></li>
<li><a href='1.html'>город В</a></li>
<li><a href='2.html'>город І</a></li>
</ul>
</div>
</div>

<div class="content">
<img src='https://www.google.ru/logos/doodles/2015/42nd-anniversary-of-the-official-recognition-of-the-letter-5644871192805376.3-res.png' alt="image" />
<div class='popmnu'>
<ul>
<li><a href='1.html'>город 1</a></li>
<li><a href='2.html'>город 2</a></li>
<li><a href='1.html'>город 3</a></li>
<li><a href='2.html'>город 4</a></li>
</ul>
</div>


</div>

<div class="content">

<img src='https://www.google.ru/logos/doodles/2015/42nd-anniversary-of-the-official-recognition-of-the-letter-5644871192805376.3-res.png' alt="image" />
<div class='popmnu'>
<ul>
<li><a href='1.html'>город А</a></li>
<li><a href='2.html'>город И</a></li>
<li><a href='1.html'>город В</a></li>
<li><a href='2.html'>город І</a></li>
</ul>
</div>
</div>

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

Вот как ещё пример с центрированием меню по середине картинки http://jsfiddle.net/gok20yta/1/

Переделал последний пример, может кому то пригодиться http://jsfiddle.net/gok20yta/2/

спасибо большое за подсказки!!! Держи карму +.

Не за что

как вставлять такую красоту в сообщения, как ты мне написал ( Сегодня, 14:22 )

Какие сообщения?

посмотри на 1-й странице нашей переписки первый твой ответ с кодом, который красиво оформлен ...

Конкретней формируй мысли. Скриншот что ли отправь, в paint'е обведи, нарисуй что ты хочешь.