Могут ли несколько всплывающих окон CSS занимать одно и то же пространство в пределах одного div?

Question

Я пытаюсь, чтобы всплывающие текстовые всплывающие окна появлялись в псевдоклассе при наведении курсора на разные строки в меню (элементы списка). Я могу сделать так, чтобы всплывающие окна занимали такое же пространство в элементе div, если меню / список расположены горизонтально, но вертикальный список размещает всплывающие окна на той же высоте по высоте, что и «родительский» список / элемент меню.

Вот соответствующий код, который у меня есть:

<div id="greenback">
  <div class="serviceframe">
    <div class="serviceslist">
<ul>
<li><a href="">item 1<span>this is popup1.</span></a></li>

<p><li><a href="">item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li></p>

<p><li><a href="">item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li></p>
</ul>
        </div><!-- closes serviceslist-->
    </div><!-- closes serviceframe -->
</div><!-- closes greenback-->

CSS:

ul {
    list-style: disc url(w-arrow.png) outside;
    }



#greenback {
    position: relative ;
        top: 0em ;
    width: 800px ;
    height: 250px ;
    background-color: #7EBB11 ;
    border: 3px solid #112D82 ;
    }

/*********SERVICE LIST MENU**********/
.serviceframe { 
    position: relative ;
    width: 100% ;
    height: 94% ; 
    background-color: #666666 ; 
    top: 3%; bottom: 3%;
    }
/*--serviceframe is now sitting in greenback--*/

.serviceslist {
    position: relative ;
    width: 100% ;
    height: 90%  ;
    top: 1% ;
    background-color: #7EBB11 ;
    font-family: Optima, Calibri, Candara, Century-Gothic, 
    Arial, sans-serif;
    font-size: 100% ;
    color: black ;
    display: table-cell ;
    vertical-align: middle ;
    z-index: 100 ;
}

.serviceslist a 
    {position: relative;
    display: table-cell; text-align: left; height: 100%;  font: 1em sans-serif; 
    text-decoration: none; color: #112D82; 
    background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
.serviceslist a:hover {
    color: white;
    }

/*appearance of the spanned content within <a></a> tags when not hovered*/
.serviceslist a span {display: none;}

/*appearance of spanned content within <a> tags when hovered*/
.serviceslist a:hover span {
    position: absolute;
    display: table-cell;  
    margin-top: 0em; margin-left: -50%; z-index: 100;
    width: 40%; height: auto; color: #FFFFFF;  background-color: #7EBB11;
    font: 14px Verdana, sans-serif; text-align: left;
    }

Answer 1

Боже мой, это много HTML и CSS для простой задачи. Я не буду пытаться прочитать все это, но просто дам вам ваш ответ

<ul>
  <li><a href="">item 1<span>this is popup1.</span></a></li>
  <li><a href="">item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li>
  <li><a href="">item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li>
</ul>

ul { position: relative; }
ul span { position: absolute; }

Вам нужно иметь только относительное положение на ul (или один из div'ов над ним), потому что это то, что вы хотите, чтобы ваш диапазон был абсолютным.

Кроме того, убейте эти P-теги вокруг ваших LI. Вы не должны иметь ничего между UL и LI.

Answer 2

То есть вы хотите, чтобы все разные пролеты появлялись в одном месте? Вы устанавливаете относительную позицию в A, что делает интервал «относительным» к нему.

Исправлено:

• Удалить относительное позиционирование в якорь. // Хотя, кажется, это не имеет значения в FF по какой-то причине
• Установить позиционирование (сверху, слева и т. Д.) Для диапазон до желаемого значения.

* Ваш фрагмент кода не работает в IE6 / 7, поэтому я не стал беспокоиться об ошибках в нем.