Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 19.10.2019, 00:41   #1
fetman
Новичок
Джуниор
 
Регистрация: 18.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, 13:54   #2
Spoilt
Пользователь
 
Регистрация: 31.01.2019
Сообщений: 11
По умолчанию

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

Спасибо! Очень помогли с этим вопросом!
fetman вне форума Ответить с цитированием
Старый 14.03.2022, 00:33   #4
Urii
 
Регистрация: 11.03.2022
Сообщений: 4
По умолчанию

Можно ещё сделать, используя внешний div:
Код:
  <div>
    <div class="red"></div>
    <div class="green">Этот текст не должен прятаться под красным блоком при position:fixed </div>
  </div>
Здесь тоже есть position, только не fixed, зато можно оставить вертикальные размеры 200px:
Код:
                body{margin:0}

		.red{
			width:700px;
			height:200px;
			background-color:red;
			position:sticky;
		}
		.green{
			width:700px;
			height:200px;
			background-color:green;
			font-size:32px;
			position:sticky;
		}
Urii вне форума Ответить с цитированием
Старый 21.03.2022, 03:38   #5
Urii
 
Регистрация: 11.03.2022
Сообщений: 4
По умолчанию

Получилось сделать position со значением fixed без внешнего div:
Код:
.red {
	width: 700px;
	height: 200px;
	background-color: red;
	position: fixed;
	top: 0px;
	left: 0px;	
}

.green {
	width: 700px;
	height: 200px;
	background-color: green;
	position: fixed;
	top: 200px;
	left: 0px;
}
Urii вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавающее меню Fixed Зигли777 HTML и CSS 2 18.02.2018 09:22
Скролл и position:fixed L6go1as HTML и CSS 0 08.02.2015 13: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