HTML — закрепленный элемент

Я разработал простой веб-сайт. Осталось только сделать маленькую коробочку слева. Но я хочу, чтобы меня всегда видели, даже когда я прокручиваю вниз. Его использование будет чем-то вроде небольшой рекламы. ![плавающее поле][1]

Можете ли вы опубликовать пример или два? какой css нужен для этого? (если это необходимо)

к сожалению, я не могу публиковать изображения, потому что я новый пользователь (мне не разрешено ... и это немного расстраивает)

Но я опубликую изображение как можно скорее.


html css dock
person Bill Ef-Temp    schedule 19.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны применить position: fixed к этому полю.

Фиксированное позиционирование

Элемент с фиксированной позицией позиционируется относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается.

Вот пример: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

Подробнее о позиционировании CSS можно прочитать здесь: http://www.w3schools.com/css/css_positioning.asp

Вот jsFiddle, который я испек для вас, который показывает, как вы можете заставить это работать: http://jsfiddle.net/leniel/8ub7s/2/

Вы можете видеть, что даже при прокрутке заголовок все еще виден, и если вы наведете на него курсор, появится рекламное поле. Просто адаптируйте CSS к своим потребностям, так как вы хотите, чтобы он располагался слева. :)

person Leniel Maccaferri    schedule 19.01.2013
comment
спасибо, я проверю это и дам вам знать, если возникнут какие-либо проблемы. Вы случайно не знаете, как я могу сделать так, чтобы этот ящик также автоматически скрывался? Будет виден только его заголовок, а затем при перемещении мыши по всему окну откроется .. :) еще раз спасибо! - person Bill Ef-Temp; 20.01.2013
comment
Допустим, коробка находится внутри <div id="myBox" style="display:none">My ad here!</div>. Затем он начинается с display:none (невидимый). Теперь вы можете добавить немного кода jQuery, чтобы он появлялся при наведении мыши и исчезал при перемещении мыши, используя такой код: stackoverflow. com/a/5404862/114029 Просто замените $('.cat').hover на $("#myBox").hover. - person Leniel Maccaferri; 20.01.2013
comment
Я попытался применить это к таблице. Причина в том, что моя страница уже разработана. Поэтому добавить новый элемент очень сложно. Я даже не знаю, куда его поместить, не затрагивая остальное содержимое. Поэтому мне нужен способ разместить новую таблицу (чтобы у меня было мое маленькое рекламное поле — с заголовком и небольшим изображением в ячейке), не затрагивая ничего другого и, конечно же, с функцией фиксированного положения. У кого-нибудь есть facebook, чтобы помочь в этом онлайн? - person Bill Ef-Temp; 20.01.2013
comment
Вы можете опубликовать новый вопрос с частью своего HTML-кода, чтобы мы могли вам помочь... - person Leniel Maccaferri; 21.01.2013