Данная статья о том как сделать и расположить фиксированный блок на сайте или в блоге.
Для того чтобы реализовать такой блок, нужно просто добавить или изменить CSS к необходимому, вновь созданному или уже существующему элементу, а именно для свойства position указать значение fixed.
Чтобы фиксированный элемент отображался поверх остальных блоков ему добавляется свойство z-index с максимальным значением.
Положение такого блока регулируется свойствами:
- top - верх,
- right - право,
- bottom - низ,
- left - лево;
обычно со значениями в пикселях(px) или процентах(%).
Значение в данном случаи означает на сколько будет смещен элемент относительно указанной стороны, при этом "0" прижимает блок к этой стороне.
Обычно указывают каких-либо два значения.
Например: top: 20px; right: 100px;
Можно указать и отрицательное значение, тогда фиксированный элемент сместиться и выйдет за пределы окна браузера на указанное расстояние.
В коде CSS это будет выглядеть примерно так:Обычно указывают каких-либо два значения.
Например: top: 20px; right: 100px;
Можно указать и отрицательное значение, тогда фиксированный элемент сместиться и выйдет за пределы окна браузера на указанное расстояние.
.fixed-block {
position: fixed;
z-index: 9999; /*значение может быть любое, но больше остальных*/
top: 20px; /*элемент будет смещен на 20 пикселей вниз*/
right: 100px; /*элемент будет смещен на 100 пикселей влево*/
}
Неподвижный элемент можно использовать в разных целях и применять его как угодно. От расположения блока, на который посетитель просто обязан обратить внимание, до какого-нибудь декоративного элемента. В общем все зависит от фантазии.position: fixed;
z-index: 9999; /*значение может быть любое, но больше остальных*/
top: 20px; /*элемент будет смещен на 20 пикселей вниз*/
right: 100px; /*элемент будет смещен на 100 пикселей влево*/
}
Большое спасибо за статью на актуальную тему!
ОтветитьУдалитьПожалуйста, приятно что пригодилось :)
УдалитьЧё-то вообще ничё не врубил)
ОтветитьУдалитьПодскажите пожалуйста а как сделать кнопку типо как у вас Прочесть полностью.
Я на своём блоге пытался что-то в этом вроде внедрить, но получилось так себе
Чтобы "врубывать" надо пробовать :) Тогда видно как все работает и сразу становится все понятно.
УдалитьПро кнопку вот статья:
http://www.magentawave.com/2012/02/change-date-img-on-blogger.html
дизайн по вкусу.
Да, надо будет попробовать... :)
УдалитьСейчас заценим статью
Довольно простое и элегантное решение.
ОтветитьУдалитьСпасибо, пригодилось
ОтветитьУдалитьДоброго времени суток, есть у меня к вам один вопрос, об который я реально голову сломал, а именно, разместил я у себя в блоге фиксированный элемент, в конкретном случае это iframe с плеером, который по клику открывается но чтобы закрыть его, нужно перезагрузить страницу, хотелось бы приклеить к iframe какой нибудь крестик дабы без лишних телодвижений закрывать этот iframe, много чего перепробовал но в blogger все варианты отказываются работать, наткнулся на одну весьма простую фишку.
ОтветитьУдалить(a href="" onclick="window.close(iframe);) " ⊗ (/a)
В домашних эксперементах сие работает на ура но в blogger перезагружает всю страницу а это ну совсем не айс, может подскажете чего?
проблемы данного характера легко решаются с помощью jQuery, вот новая статья
Удалитьhttp://www.magentawave.com/2015/06/universal-css-jquery-tooltip.html
в ней есть пример такой штуки как вам надо. можно просто повесить обработчик на ваше окно iframe и все будет нормально.
Невероятное спасибо за помощь! Вот только в css я немного представляю откуда ноги растут но js для меня дремучий лес, в общем крутил я этот скрипт и так и эдак, в подсознании всплывала дубовая роща и басня Крылова "мартышка и очки",
Удалитьв общем воз и ныне там. Эх... буду грызть дальше, авось сдюжу.
http://jsfiddle.net/fhp9krmL/
УдалитьВот вам упрощенный пример, с пояснениями, думаю он вам поможет. Попробуйте, если что обращайтесь.
Спасибо, но упрощённый вариант, удалив всё лишнее, я вычленил сразу, вот только никак не мог увязать его с этим, весьма нехитрым html кодом,
Удалитьhttps://drive.google.com/file/d/0B3oXGsPfatnpTEhKeVQzM1BRcW8/view?pli=1
либо плеер куда то уплывает, а у него в моём варианте фиксированная позиция, либо iframe перестаёт реагировать на ссылку.
Не могу понять в чём засада
Я вот собственно все думаю, а зачем вам iframe? когда и без него все отлично получается
Удалитьhttp://www.magentawave.com/2012/10/add-music-in-blog.html
В комментариях вроде бы даже ресурсы рекомендовали, куда аудио файлы заливать.
В общем то Вы правильно думаете и до недавнего времени у меня такой вариант уже был, но фишка в том что ( mixcloud.com ) это своего рода youtube но заточен исключительно под музыку, сейчас он стремительно набирает обороты, можно загружать неограниченное количество аудио контента, налету формировать плейлисты, по ходу загрузки составлять миксы и менять внешний вид плеера, а он к тому же кросплатформенный, отлично работает в любом браузере и на любом гаджете, ну и спрашивается зачем тратить свои лиметированные ресурсы когда есть без лимит.
УдалитьПроблему с крестиком пока частично решил, то ест он всё время висит, ну в принципе сильно не раздражает а с задачей справляется, просто скармливаю iframe пустой html