Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 19.10.2019, 01:41   #1
fetman
Новичок
Джуниор
 
Регистрация: 19.10.2019
Сообщений: 2
По умолчанию Позиционирование в CSS (fixed)

Здравствуйте!

Подскажите, пожалуйста, как правильно пользоваться свойством position:fixed;
Если делать фиксированной шапку сайта и "привязывать" её к самой верхушке web-страницы, то последующий за ней блок
отображается "как-бы" под ней. Т.е если у последующего блока имеется содержимое, то его не видно. Возникает ситуация при которой последующий блок располагается в самом начале web-страницы, и в этом же месте "зафиксирована" шапка сайта, которая перекрывает собой контент. Ниже расположен пример с моей проблемой:

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

Для удобства задал высоту красного блока 200рх, а зеленого(с текстом) 400рх. При задании красному блоку свойства position:fixed зеленый блок на web-странице имеет размер 200рх вместо 400рх и текст не видно

Код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
	<style>

		body{margin:0}

		.red{
			width:700px;
			height:200px;
			background-color:red;
			 <!--  position:fixed; -->
		}
		.green{
			width:700px;
			height:400px;
			background-color:green;
			font-size:32px;
		}
	</style>	
</head>
<body>
	<div class="red"></div>
	<div class="green">Этот текст не должен прятаться под красным блоком при position:fixed </div>
</body>
</html>
P.S. Изначально в коде свойство position:fixed закомментированно.
fetman вне форума   Ответить с цитированием
Старый 21.10.2019, 14:54   #2
Spoilt
Пользователь
 
Регистрация: 31.01.2019
Сообщений: 11
По умолчанию

Можно оттолкнуть зеленый блок margin-top: 250px; , а красный прикрепить к верхнему углу top: 0;
Spoilt вне форума   Ответить с цитированием
Старый 21.10.2019, 23:29   #3
fetman
Новичок
Джуниор
 
Регистрация: 19.10.2019
Сообщений: 2
По умолчанию

Спасибо! Очень помогли с этим вопросом!
fetman вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавающее меню Fixed Зигли777 HTML и CSS 2 18.02.2018 10:22
Скролл и position:fixed L6go1as HTML и CSS 0 08.02.2015 14:37
директива fixed Voipp C# (си шарп) 2 19.07.2013 10:53
Div с position:fixed shilinpavel HTML и CSS 1 03.12.2011 22:39
ios::fixed Niksan Общие вопросы C/C++ 1 24.05.2011 13:40


19:15.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.