Фиксированные блоки на сайте

Гора на закатеИногда требуется чтобы некоторые элементы сайта, находились всегда на виду у посетителя и даже при прокрутке страницы оставались неподвижными. Зафиксировать блок, закрепить его в окне браузера, можно при помощи CSS и специально предназначенного для этого свойства.
  Данная статья о том как сделать и расположить фиксированный блок на сайте или в блоге.
  Для того чтобы реализовать такой блок, нужно просто добавить или изменить CSS к необходимому, вновь созданному или уже существующему элементу, а именно для свойства position указать значение fixed.
  Чтобы фиксированный элемент отображался поверх остальных блоков ему добавляется свойство z-index с максимальным значением.
  Положение такого блока регулируется свойствами:
- top - верх,
- right - право,
- bottom - низ,
- left - лево;
обычно со значениями в пикселях(px) или процентах(%).
Значение в данном случаи означает на сколько будет смещен элемент относительно указанной стороны, при этом "0" прижимает блок к этой стороне.
  Обычно указывают каких-либо два значения.
Например: top: 20px; right: 100px;
  Можно указать и отрицательное значение, тогда фиксированный элемент сместиться и выйдет за пределы окна браузера на указанное расстояние.
  В коде CSS это будет выглядеть примерно так:
.fixed-block {
  position: fixed;
  z-index: 9999; /*значение может быть любое, но больше остальных*/
  top: 20px; /*элемент будет смещен на 20 пикселей вниз*/
  right: 100px; /*элемент будет смещен на 100 пикселей влево*/
}
Фиксированный элемент в окне браузера
  Неподвижный элемент можно использовать в разных целях и применять его как угодно. От расположения блока, на который посетитель просто обязан обратить внимание, до какого-нибудь декоративного элемента. В общем все зависит от фантазии.

14 комментариев:

  1. Большое спасибо за статью на актуальную тему!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, приятно что пригодилось :)

      Удалить
  2. Чё-то вообще ничё не врубил)
    Подскажите пожалуйста а как сделать кнопку типо как у вас Прочесть полностью.
    Я на своём блоге пытался что-то в этом вроде внедрить, но получилось так себе

    ОтветитьУдалить
    Ответы
    1. Чтобы "врубывать" надо пробовать :) Тогда видно как все работает и сразу становится все понятно.
      Про кнопку вот статья:
      http://www.magentawave.com/2012/02/change-date-img-on-blogger.html
      дизайн по вкусу.

      Удалить
    2. Да, надо будет попробовать... :)
      Сейчас заценим статью

      Удалить
  3. Анонимный29.08.13, 14:52

    Довольно простое и элегантное решение.

    ОтветитьУдалить
  4. Анонимный13.06.14, 7:11

    Спасибо, пригодилось

    ОтветитьУдалить
  5. Доброго времени суток, есть у меня к вам один вопрос, об который я реально голову сломал, а именно, разместил я у себя в блоге фиксированный элемент, в конкретном случае это iframe с плеером, который по клику открывается но чтобы закрыть его, нужно перезагрузить страницу, хотелось бы приклеить к iframe какой нибудь крестик дабы без лишних телодвижений закрывать этот iframe, много чего перепробовал но в blogger все варианты отказываются работать, наткнулся на одну весьма простую фишку.
    (a href="" onclick="window.close(iframe);) " ⊗ (/a)
    В домашних эксперементах сие работает на ура но в blogger перезагружает всю страницу а это ну совсем не айс, может подскажете чего?

    ОтветитьУдалить
    Ответы
    1. проблемы данного характера легко решаются с помощью jQuery, вот новая статья
      http://www.magentawave.com/2015/06/universal-css-jquery-tooltip.html
      в ней есть пример такой штуки как вам надо. можно просто повесить обработчик на ваше окно iframe и все будет нормально.

      Удалить
    2. Невероятное спасибо за помощь! Вот только в css я немного представляю откуда ноги растут но js для меня дремучий лес, в общем крутил я этот скрипт и так и эдак, в подсознании всплывала дубовая роща и басня Крылова "мартышка и очки",
      в общем воз и ныне там. Эх... буду грызть дальше, авось сдюжу.

      Удалить
    3. http://jsfiddle.net/fhp9krmL/
      Вот вам упрощенный пример, с пояснениями, думаю он вам поможет. Попробуйте, если что обращайтесь.

      Удалить
    4. Спасибо, но упрощённый вариант, удалив всё лишнее, я вычленил сразу, вот только никак не мог увязать его с этим, весьма нехитрым html кодом,
      https://drive.google.com/file/d/0B3oXGsPfatnpTEhKeVQzM1BRcW8/view?pli=1
      либо плеер куда то уплывает, а у него в моём варианте фиксированная позиция, либо iframe перестаёт реагировать на ссылку.
      Не могу понять в чём засада

      Удалить
    5. Я вот собственно все думаю, а зачем вам iframe? когда и без него все отлично получается
      http://www.magentawave.com/2012/10/add-music-in-blog.html
      В комментариях вроде бы даже ресурсы рекомендовали, куда аудио файлы заливать.

      Удалить
    6. В общем то Вы правильно думаете и до недавнего времени у меня такой вариант уже был, но фишка в том что ( mixcloud.com ) это своего рода youtube но заточен исключительно под музыку, сейчас он стремительно набирает обороты, можно загружать неограниченное количество аудио контента, налету формировать плейлисты, по ходу загрузки составлять миксы и менять внешний вид плеера, а он к тому же кросплатформенный, отлично работает в любом браузере и на любом гаджете, ну и спрашивается зачем тратить свои лиметированные ресурсы когда есть без лимит.
      Проблему с крестиком пока частично решил, то ест он всё время висит, ну в принципе сильно не раздражает а с задачей справляется, просто скармливаю iframe пустой html

      Удалить

Следующее Предыдущее

BestProject