Вопрос по относительному позиционированию DIV

[XPOMOB]

Короче, есть длинный текст, где-то в серидине есть <span>слово</span> - нужно под этим "словом", поверх остального текста, вывести DIV.

<div style="position: relative; - делает перенос строки и вставляется в текст (а не поверх этого текста)

Дизайн тянется, и указать обсолютные координаты нельзя... Но можно использовать Javascript, т.к. DIV будет появлятся только при нажатии (наведении-не решил пока ещё...) мыши.

Смотрел много примеров, но нашел только где положение высчитывается относительно курсора мыши...

[B~Vladi]

Всё это можно сделать на CSS

[XPOMOB]

B~Vladi - мне лично пофигу на чем это можно сделать. К томуже в этой ветке форума почти ко всему такой ответ можно дать.

[B~Vladi]

XPOMOB, спокойно

Для того, чтобы небыло переноса строк, диву нужно задать абсолютное позицианирование и всунуть его в span. Далее display:none; и спану position:relative;. Затем выравниваем див bottom:0;, left:0; и вешаем обработчик на спан, который будет менять диву display.

[XPOMOB]

Для того, чтобы небыло переноса строк, диву нужно задать абсолютное позицианирование и всунуть его в span. Далее display:none; и спану position:relative;. Затем выравниваем див bottom:0;, left:0; и вешаем обработчик на спан, который будет менять диву display.

Вот что я сделал. Советы помогли немного. Див стал появлятся под "словом" - это уже хорошо Но перенос строки остался. И ещё, если "слово" находится в непосредственно близости от правого края - при появлении дива появляется горизонтальная прокрутка. И ещё Опера как-то не полностью Див показывает (но это наверное потом можно будет как-то решить...) Так же при bottom:0; - див повялется в самом верху, а не под словом - пришлось заменить на 1 (хотя если поставить 100 или 200 - результат одинаковый)

И ещё: в примере встретился параметр visibility -может его использовать? или разници особой нет?

Дальше код JS

<script type="text/javascript">
function view(){ 
 test1.style.display="block"; //блок становится видимым 
 //test1.style.display="inline"; //блок становится видимым 
 //test1.style.visibility="visible"; //блок становится видимым 
}

function noview(){ 
 test1.style.display="none"; //блок становится невидимым 
}

</script>

И HTML

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
текст текст текст текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
текст текст текст
<span style="position: relative; " onmouseover="view()" onmouseout="noview()">
слово
<div id="test1" style="display: none; position: absolute; bottom:1; left:0; width: 150px; height: 150px; z-index: 1; background-color:#008000;">
текст_дива</div>

</span> текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
текст текст текст текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Где что я неправильно делаю?

[B~Vladi]

в примере встретился параметр visibility -может его использовать? или разници особой нет?

В вашем случае нет.

Но перенос строки остался.

а при

test1.style.display="inline";

тоже есть?! По идее не должно быть...

[B~Vladi]

ЗЫ: див лучше поместить перед "словом".

[XPOMOB]

test1.style.display="inline";
тоже есть?! По идее не должно быть...

тоже есть

положение слова ничего не меняет, даже хуже становится. слово переносится на следующую строку, а див повляется в конце предыдущей.

[B~Vladi]

Вобщем делать нада так:

<span>
<span style="display:none; position:absolute; margin-top:20px; background-color:#008000; ">текст_дива</span>
слово
</span>

и менять

test1.style.display="inline"

[B~Vladi]

а если внешний span переделать в ссылку, можно тогда будет для него прописать:

a:hover span{
  display:inline;
}

и забыть про JS.