Позиционирование абсолютного div внутри относительного контейнера - PullRequest
Новая
       3

Позиционирование абсолютного div внутри относительного контейнера

1 голос
/ 19 октября 2011

У меня есть изображение, и я хочу показать всплывающий элемент div при наведении курсора на это изображение. Ниже мой код; 

<div class="wrapper">
    <ul class="popup">
        <li><a href="#"Link 1</a></li>
                  <li><a href="#"Link 2</a></li>
        <li><a href="#"Link 3</a></li>
                  <li><a href="#"Link 4</a></li>
    </ul>
    <img src="iOpenPopupOnHover.gif" /
</div>
<div class="wrapper">
    <ul class="popup">
        <li><a href="#"Link 1</a></li>
                  <li><a href="#"Link 2</a></li>
        <li><a href="#"Link 3</a></li>
                  <li><a href="#"Link 4</a></li>
    </ul>
    <img src="iOpenPopupOnHover.gif" /
</div>
...

Теперь я использую положение: относительное для оболочки и положение: абсолютное для всплывающего окна. Это bcoz. Я хочу расположить всплывающее окно вверху / по центру относительно каждого изображения.

Теперь проблема заключается в том, что, в то время как абсолютная позиция, кажется, вычисляется по отношению к изображению, всплывающее окно полностью содержится внутри div-оболочки, и некоторые кадры всплывающих окон обрезаются. Я хочу, чтобы отображалось полное всплывающее окно ... Как это исправить?

Ниже приведен CSS 

.wrapper {
    float: left;
    position: relative;
}

.popup {
    display: none;
    width: 80px;
    background-color: red;
    position: absolute;
    bottom: 105px;
    left: 10px;
}

1 Ответ

0 голосов
/ 19 октября 2011

Как то так? 

.wrapper {
    float: left;
    position: relative;
    overflow: visible;
}
...