Как я могу создать «плавающий» объект ниже встроенного элемента в HTML?

Question

У меня есть множество обычных встроенных ссылок, которые я хочу открывать при щелчке по маленьким «плавающим» объектам. Эти объекты будут простыми HTML-файлами div (с некоторыми CSS), которые будут загружаться в верхней части страницы и под ссылкой. Я не хочу использовать относительное позиционирование, которое будет толкать страницу, и я не могу придумать способ использовать абсолютное позиционирование, чтобы получить div под встроенными ссылками. В настоящее время я предполагаю переключение отображаемой стоимости объектов с нуля на что угодно и обратно. Я открыт для идей.

Спасибо!

Mike

Answer 1

Вы можете использовать абсолютное позиционирование с родителем, установленным на относительное. например,

<div id="container">
    <a href=...>hover me for floating!</a>
    <div class="floating">
     ...
    </div>
</div>

В CSS,

#container { position: relative; ... }
.floating { position: absolute; top: 20px; left: 20px; }

В вышеприведенном примере .floating div имеет абсолютное позиционирование, что означает, что он удален из нормального потока (т. Е. Его нет). Но это также относительная ссылка на его родителя, который в данном случае является контейнером div #, так что, если вы установите верхнюю и левую позиции, он фактически вычисляется из верхнего левого угла контейнера div #, а не к документу. тело.

Answer 2

Я бы предложил:

<style="text/css">

a {
display: inline;
position: relative;
}

a span.pop_up_floaty_thing {
position: absolute;
top: 1em;
left: 0;
display: block;
width: 10em; /* or whatever  */
}

</style>

<a href="..." title="...">Link text<span class="pop_up_floaty_thing">The pop up, floaty thing text</span></a>

Answer 3

Вы можете использовать «фиксированную» позицию:

<div style="position: fixed; left:100px; top:100px; background-color: white; height: 200px; width: 200px;"> ... </div>

"фиксированная позиция" -> Генерирует абсолютно позиционированный элемент, расположенный относительно окна браузера. Положение элемента задается свойствами «left», «top», «right» и «bottom»