slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 27496
Теги: css, display, position, left, fixed

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

 Для того, чтобы закрепить какой-то элемент, будь то картинка или div или ещё бог знает чего, необходимо задать свойство position со значением fixed.

Это зафиксирует элемент на экране и при прокрутке он не будет двигаться. Если вы хотите так же задать позицию на экране, где должен располагаться элемент используйте свойства top, left, bottom, right. Которые задают координаты элемента относительно сторон экрана, т.е. не зависят от того, сколько высоты страницы прокручено.

Так же часто бывает, что даже при использовании position вы не видите зафиксированный элемент, если у вас уже написано куча кода или он не ваш, то скорее всего его перекрывают другие элементы с большими значениями z-index. Подробнее об этом вы можете прочитать в нашей статье - Слои на задний/передний план при помощи CSS: z-indexлои на задний/передний план при помощи CSS: z-index.

Вот пример кода, который будет фиксировать блок с текстом на странице:

<div class="fix_block">Фиксированный блок</div>
div.fix_block {
	position: fixed; 
	top: 100px; 
	left: 30px; 
	padding: 20px; 
	border: 1px solid #000;
}

Результат вы все так же можете увидеть слева.

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

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 1485
!important в CSS

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

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

В этой статье я расскажу о том, каким образом можно подключить сторонние шрифты на свой сайт, а так же дам пару полезных ссылок и советов.

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

cyrilsh аватар
Сразу прошу обратить внимание, что это не совсем обычное предложение, потому просьба не писать, пока...
Перейти в тему
Музыкальный сайт 1 нед. 5 дн. назад
giljza аватар
Приветствую друзья! Решил попробовать создать музыкальный сайт но с толкнулся с проблемой при выборе...
Перейти в тему
triada1 аватар
Добрый день.Сразу к сути . В поиске выдает ссылку на удаленную страницу, хотя в файлах сайта этой ст...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.