Для рассмотрения темы фиксированного позиционирования, нам потребуется изображение кнопки.
Можносделать простейшее изображение кнопки, в доступном всем Painte.
При фиксированном позиционировании, размещение картинки производится относительно границ экрана, и обычно она является ссылкой.
HTML
<div id="knopka">
<a href="https://starper55plys.ru" target="_blank">
<img src="images/knopka.png" width="46" height="273" ></a>
</div>CSS
#knopka{
position: fixed; /*Фиксированное позиционирование*/
width: 46px; /*Ширина картинки*/
height: 273px; /*Высота картинки*/
top: 300px; /*Отступ от верха экрана*/
right:0px; /*Сторона экрана*/
}Посмотрим что получилось.
Можно обойтись вообще без картинки, и написать для кнопки вот такой код. Пример Вы видите на этой странице справа.
<!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);
Если просто html страница, и к ней не подключён файл стилей, то в статье как раз и есть пример такой страницы. Только комментарии из кода уберите.
А если у меня сайт не на вордпресс, а обычный html-сайт, то есть страница? Где должен быть этот файл, и куда именно в этом файле нужно делать вставку?
Если у вас сайт на WordPress, то основным является файл style.css. тот код что в теге style разместите в нём, а тот что в теге body прямо в поле редактора в режиме Текст. Если кнопка нужна только для одной страницы, то можно не лазить в файл style.css, а вставить в тег button, после адреса атрибут style=»» и ввести в него все свойства и значения. Если кнопка нужна на всех страницах сайта, то button нужно разместить не в поле редактора, а в файле footer.php или header.php, перед закрывающим тегом и спозиционировать (поставить свои значения в свойствах top и right) относительно них.
Только имейте в виду, что при обновлениях шаблона кнопка, да и вообще всё что вы добавите будет потеряно, так как обновятся все файлы. Чтоб этого не происходило создайте дочернюю тему. Делается это просто, и в интернете по этому поводу полно информации.
Уточните, Пожалуйста, а где именно в файле css размещать необходимый код, и в каком именно файле css?