Как здесь устроено "к странице"?
 

Как здесь устроено "к странице"?

Внизу тем, где много страниц, есть кнопка с треугольником, если на неё кликнуть, то под ней появляется окно с надписью "к странице", и можно ввести номер страницы, чтобы на неё быстро перейти.

Подскажите, пожалуйста, как сделано так, что это окно появляется точно под кнопкой?

Само окно представляет из себя div-объект.

<div style="position: absolute; z-index: 50; clip: rect(auto, auto, auto, auto); left: 1075px; top: 509px;" id="pagenav_menu" class="vbmenu_popup"> ...	</div>

Как здесь вычислено "left: 1075px" и "top: 509px" ? Потому, что они зависят от размера шрифта размера окна браузера, и прочих параметров.

Такую кнопку с выпадающим меню вообще можно сделать на голом html, или обязательно должен быть javascript?

Тоже самое, что и "к странице", здесь ещё и "опции темы" и "искать в теме".

А как ЗДЕСЬ устроено?

Что именно вам непонятно?

Непонятно как выглядит жаваскрипт-код, который здесь это делает.
Непонятно можно ли это сделать без javascript? Указать что-нибудь типа "position: relative;", только не relative, а чтобы div был поверх остальной страницы.

Какая разница, как именно здесь это делается? Посмотрите исходники, если это так интересно.

Иногда можно. Контейнеру ставите position: relative, дочерние элементы с position: absolute будут позиционироваться относительно этого контейнера.

Чтобы я мог просто скопировать нужный кусок кода и вставить себе.


Я не нашёл где именно там.


Немного помогло. :)
А как теперь сделать, чтобы div появлялся под кнопкой, а не поверх неё?

Это не всегда возможно.

top/left

Спасибо!

Сделал так:

<SCRIPT type=text/javascript>
  function toggleB(e){e.style.display=(e.style.display!='block')?'block':'none'}
</SCRIPT>

<style type=text/css><!--
#wind {
  position: absolute;
  width:320px;
  left: 0px;
  top: 4px;
  border:solid #105a98 1px;
  display: none;
  background-color:#FFFFFF;
  color:#000000;
  padding:10px;
}
//--></style>

  <span style='position:relative'><div id="wind">
     Всплывающее окно
  </div></span>
  <a href="#" onclick="toggleB(document.getElementById('wind'));return false;"
  >Открыть окно</a>

При изменении размера шрифта, окно остаётся на месте, в отличии от окна "к странице", которое используется здесь.