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

Для рассмотрения темы фиксированного позиционирования, нам потребуется изображение кнопки.

Можносделать простейшее изображение кнопки, в доступном всем Painte.

При фиксированном позиционировании, размещение картинки производится относительно границ экрана, и обычно она является ссылкой.

HTML

<div id="knopka">
<a href="https://starper55plys.ru" target="_blank">
<img src="images/knopka.pngwidth="46" height="273" ></a>
</div>

CSS

#knopka{
  position: fixed;  /*Фиксированное позиционирование*/
  width: 46px;   /*Ширина картинки*/
  height: 273px;   /*Высота картинки*/
  top: 300px;     /*Отступ от верха экрана*/
  right:0px;       /*Сторона экрана*/
}

Посмотрим что получилось.
50

Можно обойтись вообще без картинки, и написать для кнопки вот такой код. Пример Вы видите на этой странице справа.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
 #fix{
	position: fixed;		/*Фиксируем*/
	top: 200px;
	right: 0px;
	padding: 10px;		/*Поле вокруг текста*/
	font-family: Arial;
	font-size: 16px;
	background: #7df9ff;		/*Фон кнопки*/
	border-radius: 5px;		/*Закругляем уголки*/
	box-shadow: 0 0 0 2px #0ea8f4;		/*Рамка*/
	-webkit-transform: rotate(-90deg);    /*Повернуть вертикально*/
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
 }
</style>
</head>
<body>
    <button id="fix" onclick="location.href='https://starper55plys.ru/'">
    Пример кнопки<</button>
</body>
</html>

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

Невольно возникает мысль, что нечто подобное мы уже делали с помощью свойства “background”, но отличие состоит в том, что в этом случае картинка у нас является ссылкой, чего нельзя сделать при помощи “background”.

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

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

Но такой блок обязательно должен быть снабжён функцией закрытия (крестик в правом верхнем углу).

В противном случае, посетитель, не желающий смотреть рекламу может просто уйти с сайта.

Применяется фиксация так же к кнопкам типа «Вверх» и «Вниз», когда страница очень большая (длинная), и желательно одним кликом переместиться в начало или конец.

Ещё фиксированное позиционирование можно применить для фиксации фонового изображения, размещённого в теге <body> (поля сайта), и переходящего в шапку сайта.

Делается это тогда, когда фоном является какой либо вид, картина, и нужно чтобы контент прокручивался независимо от него.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

Учитель:
— Сидоров, завтра без родителей в школу не приходи!
— А послезавтра?…

Относительное позиционирование (position:relative) < < < В раздел > > > Что такое псевдо-элемент CSS
 

А ну-ка, что там ещё интересного
Абсолютное позиционирование (absolute);
Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Фиксированное позиционирование»

  1. stariс говорит:

    Если просто html страница, и к ней не подключён файл стилей, то в статье как раз и есть пример такой страницы. Только комментарии из кода уберите.

  2. Сергей говорит:

    А если у меня сайт не на вордпресс, а обычный html-сайт, то есть страница? Где должен быть этот файл, и куда именно в этом файле нужно делать вставку?

  3. stariс говорит:

    Если у вас сайт на WordPress, то основным является файл style.css. тот код что в теге style разместите в нём, а тот что в теге body прямо в поле редактора в режиме Текст. Если кнопка нужна только для одной страницы, то можно не лазить в файл style.css, а вставить в тег button, после адреса атрибут style=»» и ввести в него все свойства и значения. Если кнопка нужна на всех страницах сайта, то button нужно разместить не в поле редактора, а в файле footer.php или header.php, перед закрывающим тегом и спозиционировать (поставить свои значения в свойствах top и right) относительно них.

    Только имейте в виду, что при обновлениях шаблона кнопка, да и вообще всё что вы добавите будет потеряно, так как обновятся все файлы. Чтоб этого не происходило создайте дочернюю тему. Делается это просто, и в интернете по этому поводу полно информации.

  4. Сергей говорит:

    Уточните, Пожалуйста, а где именно в файле css размещать необходимый код, и в каком именно файле css?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *