div заходит под по div c position fixed
Подскажите, пожалуйста, как можно исправить, чтобы div с id=»footer» не заходил под div с id=»header» .
#header #footer
Отслеживать
задан 28 мая 2017 в 20:25
383 4 4 серебряных знака 18 18 бронзовых знаков
пробивали через margin-top: ?
28 мая 2017 в 20:27
@Микола Кікець После div с id=»header» и перед div с id=»footer» находится еще информация (причём динамическая), маргином это вообще не вариант.
28 мая 2017 в 20:30
А что футер должен делать вместо того, чтобы не заходить под шапку? Залезать на шапку сверху?
28 мая 2017 в 21:41
если размеры шапки динамические, то тут без JS никак)
28 мая 2017 в 22:42
скажите а для чего нужно ставить header как fixed ?
29 мая 2017 в 4:34
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Думаю надо делать padding-top у body , высотой в #header . При наличии контента на сайте подвал до шапки не достанет.
body < padding-top: 100px >#header #footer
Отслеживать
ответ дан 29 мая 2017 в 7:35
Artem Gorlachev Artem Gorlachev
4,425 8 8 серебряных знаков 17 17 бронзовых знаков
@ Отлично! Спасибо большое!:)
30 мая 2017 в 21:37
- html
- css
- html5
- css3
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.10.814
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
std:: fixed
Sets the floatfield format flag for the str stream to fixed .
When floatfield is set to fixed , floating-point values are written using fixed-point notation: the value is represented with exactly as many digits in the decimal part as specified by the precision field ( precision ) and with no exponent part.
The floatfield format flag is both a selective and a toggle flag: it can take one, both or none of the following values:
| flag value | effect when set |
|---|---|
| fixed | write floating-point values in fixed-point notation |
| scientific | write floating-point values in scientific notation. |
| (none) | write floating-point values in default floating-point notation. |
The default notation (none) is a different floatfield value than either fixed or scientific . The default notation can be selected by calling str.unsetf(ios_base::floatfield) .
For standard streams, no floatfield is set on initialization (default notation).
The floatfield format flag is both a selective and a toggle flag: it can take any of the following values, or none:
| flag value | effect when set |
|---|---|
| fixed | write floating-point values in fixed-point notation. |
| scientific | write floating-point values in scientific notation. |
| hexfloat | write floating-point values in hexadecimal format. The value of this is the same as (fixed|scientific) |
| defaultfloat | write floating-point values in default floating-point notation. This is the value by default (same as none, before any other floatfield bit is set). |
For standard streams, the floatfield format flag is set to defaultfloat on initialization.
The precision field can be modified using member precision .
Notice that the treatment of the precision field differs between the default floating-point notation and the fixed and scientific notations (see precision ). On the default floating-point notation, the precision field specifies the maximum number of meaningful digits to display both before and after the decimal point, while in both the fixed and scientific notations, the precision field specifies exactly how many digits to display after the decimal point, even if they are trailing decimal zeros.
Parameters
str Stream object whose floatfield format flag is affected.
Because this function is a manipulator, it is designed to be used alone with no arguments in conjunction with the insertion ( extraction ( >> ) operations on streams (see example below).
Return Value
Argument str .
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// modify floatfield // std::cout, std::fixed, std::scientific int main () < double a = 3.1415926534; double b = 2006.0; double c = 1.0e-10; std::cout.precision(5); std::cout "default:\n"; std::cout << a '\n' << b '\n' << c '\n'; std::cout '\n'; std::cout "fixed:\n" << std::fixed; std::cout << a '\n' << b '\n' << c '\n'; std::cout '\n'; std::cout "scientific:\n" << std::scientific; std::cout << a '\n' << b '\n' << c '\n'; return 0; >Possible output:
default: 3.1416 2006 1e-010 fixed: 3.14159 2006.00000 0.00000 scientific: 3.14159e+000 2.00600e+003 1.00000e-010
Data races
Modifies str . Concurrent access to the same stream object may cause data races.
Exception safety
Basic guarantee: if an exception is thrown, str is in a valid state.
See also
scientific Use scientific floating-point notation (function) ios_base::flags Get/set format flags (public member function) ios_base::setf Set specific format flags (public member function) ios_base::unsetf Clear specific format flags (public member function)
Перевод «fixed» на русский
Fixed dividends are established in a fixed amount to one share or fixed percent to the nominal value of a share.
Фиксированные дивиденды устанавливаются в фиксированной сумме на одну акцию или фиксированном проценте к номинальной стоимости акции.
However, unlike manufacturing, construction operations are never completely standardised (neither in a fixed sequence nor at a fixed location).
Однако, в отличие от производства, строительные операции никогда не были полностью стандартизированы (ни в фиксированной последовательности, ни в фиксированном месте).
A trader receives either a fixed profit or fixed loss.
Трейде получает или фиксированную прибыль, или фиксированный убыток.
It is also called a fixed displacement pump, as it pumps a fixed amount of fluid for every revolution.
Он также называется насосом с фиксированным рабочим объемом, так как он качает фиксированное количество жидкости за каждый оборот.
A fixed polarity of power means fixed alliances.
Фиксированное распределение сил означает фиксированные альянсы.
A remote employee has a permanent contract with one company, a fixed working day and a fixed monthly salary.
Удалённый работник имеет постоянный контракт с одной компанией, фиксированный рабочий день и фиксированную ежемесячную зарплату.
Duality theory was developed for two variants of the problem: with fixed marginals and with a fixed marginal difference.
Построена теория двойственности для двух вариантов задачи: с фиксированными маргинальными мерами и с фиксированной разностью маргинальных мер.
Binary options are very simple option contract with a fixed risk and fixed reward.
Бинарный опцион — это очень простой вариант контракта с фиксированным риском и фиксированной выгодой.
Conventional radios operate on fixed channels and each user group is permanently assigned a fixed frequency or a set of frequencies.
Обычные рации работают на фиксированной частоте канала, и каждая группа устанавливает свою фиксированную частоту или несколько частот.
Binary options are a type of option that provides a fixed deadline for expiration with a fixed payout.
Бинарные опционы — это тип опционов, выставляющих фиксированный срок истечения с фиксированной выплатой.
So there is no fixed cause or fixed effect.
Так что не существует никакой фиксированной причины или установленного следствия.
As the term implies, fixed income traders are required to have specific knowledge of certain fixed income instruments such as bonds or corporate bonds.
Фиксированный доход трейдера требуется иметь определенные знания определенных инструментов с фиксированным доходом, такие как облигации или корпоративные облигации.
If the employer has a fixed need for labour, the working hours, too, should be fixed.
Если потребность в рабочей силе фиксированная, то соответственно рабочие часы тоже должны быть фиксированными.
Plus added a fixed payment is analogue fixed base size in the old pension formula.
К полученному прибавляется фиксированная выплата — аналог фиксированного базового размера в прежней пенсионной формуле.
C may, for example, represent a fixed constant value, a set of fixed constants or an adjustable calibration parameter.
С может представлять собой, например, фиксированное постоянное значение, набор фиксированных констант или настраиваемый параметр калибровки.
A fixed amount of money is kept aside with a financial institution for a fixed number of days or months or years.
Фиксированная сумма удерживается в стороне от финансового учреждения на фиксированное количество дней или месяцев.
Disc space has a fixed size and a fixed maximum number of files according to the selected service.
Дисковое пространство имеет фиксированный размер и фиксированное максимальное количество размещенных файлов в соответствии с выбранным вариантом.
There are three types of registration duties: proportional duties, specific fixed duties and the general fixed duty.
Существует три вида регистрационных сборов: пропорциональные сборы, специально установленные сборы и общий фиксированный сбор.
Возможно неприемлемое содержание
Примеры предназначены только для помощи в переводе искомых слов и выражений в различных контекстах. Мы не выбираем и не утверждаем примеры, и они могут содержать неприемлемые слова или идеи. Пожалуйста, сообщайте нам о примерах, которые, на Ваш взгляд, необходимо исправить или удалить. Грубые или разговорные переводы обычно отмечены красным или оранжевым цветом.
position
Свойство CSS position указывает, как элемент позиционируется в документе. top , right , bottom и left (en-US) определяют конечное местоположение позиционированных элементов.
Интерактивный пример
Типы позиционирования
- Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative , absolute , fixed либо sticky . (Другими словами, это все, кроме static .)
- Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative . Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left (en-US) и right задают горизонтальное смещение.
- Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed . top , right , bottom и left (en-US) задают смещения от краёв содержащего блок элемента . (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
- Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky . Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto ) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока .
В большинстве случаев абсолютно позиционированные элементы, которые имеют height и width установленные в auto , имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top , так и bottom , и оставляя height неопределённым (то есть , auto ). Ими также можно заполнить доступное горизонтальное пространство, указав как left (en-US), так и right , и оставляя width как auto .
За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):
- Если указаны top и bottom (технически, не auto ) — приоритет будет у top .
- Если указаны left и right : приоритет будет у left , когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right , когда direction является rtl (персидский , Арабский, иврит и т. д.).
Синтаксис
Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.
Значения
Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top , right , bottom , left и z-index не применяются к данному элементу. Это значение по умолчанию.
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top , right , bottom и left . Смещение не влияет на положение любых других элементов, то есть пространство, выделяемое для элемента в макете страницы, такое же, как если бы позиция была static . Это значение создаёт новый контекст наложения , когда значение z-index не auto . Его влияние на элементы table-*-group , table-row , table-column , table-cell и table-caption не определено.
Элемент удаляется из обычного потока документа, и для элемента в макете страницы не выделяется дополнительное пространство. Он располагается относительно своего ближайшего спозиционированного предка, если такой есть; в противном случае он помещается относительно исходного содержащего блока . Его конечная позиция определяется значениями top , right , bottom , и left . Это значение создаёт новый контекст наложения , когда значение z-index не auto . Внешние отступы абсолютно спозиционированных блоков не схлопываются с отступами других блоков.
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного содержащего блока , установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform , perspective , или filter , установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter , способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top , right , bottom и left . Это значение всегда создаёт новый контекст наложения . При печати fixed -элемент помещается в одно и то же место на каждой странице.
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов.Это значение всегда создаёт новый контекст наложения . Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden , scroll , auto или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).
Формальный синтаксис
position =
static | (en-US)
relative | (en-US)
absolute | (en-US)
sticky | (en-US)
fixed | (en-US)
running( )
Примеры
Относительное позиционирование
Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.
HTML
div class="box" id="one">Onediv> div class="box" id="two">Twodiv> div class="box" id="three">Threediv> div class="box" id="four">Fourdiv>
CSS
.box display: inline-block; width: 100px; height: 100px; background: red; color: white; > #two position: relative; top: 20px; left: 20px; background: blue; >
Абсолютное позиционирование
Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static ). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок — см. также определение W3C), который содержит блок корневого элемента документа.
h1>Абсолютное позиционированиеh1> p> Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня. p> p class="positioned"> По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы. p> p> Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих. p> p> встроенные элементы span>как этотspan> и span>вот этотspan> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов span >перейдёт на новую строку, если это возможно, - как содержимое этого текстаspan >, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:img src="long.jpg" /> p>
body width: 500px; margin: 0 auto; > p background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span background: red; border: 1px solid black; > .positioned position: absolute; background: yellow; top: 30px; left: 30px; >
Фиксированное позиционирование
Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform , perspective , или свойства filter , отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id=»one» фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.
HTML
div class="outer"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> div class="box" id="one">Onediv> div>
CSS
.box background: red; width: 100px; height: 100px; margin: 20px; color: white; > #one position: fixed; top: 80px; left: 10px; > .outer width: 500px; height: 500px; overflow: scroll; padding-left: 150px; >
Липкое позиционирование
Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например.
#one position: sticky; top: 10px; >
. позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.
Типичное использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.
Вы должны указать порог с по крайней мере одним из top , right , bottom , или left (en-US) для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.
HTML
div> dl> dt>Adt> dd>Andrew W.K.dd> dd>Apparatdd> dd>Arcade Firedd> dd>At The Drive-Indd> dd>Aziz Ansaridd> dl> dl> dt>Cdt> dd>Chromeodd> dd>Commondd> dd>Convergedd> dd>Crystal Castlesdd> dd>Cursivedd> dl> dl> dt>Edt> dd>Explosions In The Skydd> dl> dl> dt>Tdt> dd>Ted Leo & The Pharmacistsdd> dd>T-Paindd> dd>Thricedd> dd>TV On The Radiodd> dd>Two Gallantsdd> dl> div>
CSS
* box-sizing: border-box; > dl margin: 0; padding: 24px 0 0 0; > dt background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px Helvetica, Arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; > dd font: bold 20px/45px Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; > dd + dd border-top: 1px solid #ccc; >
Доступность
Убедитесь, что элементы, расположенные с absolute или fixed значением, не затеняют другой контент при увеличении страницы, увеличивая размер текста.
- MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
- Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0
Производительность и доступность
Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.
Характеристики
| Specification |
|---|
| CSS Positioned Layout Module Level 3 # position-property |
Совместимость с браузером
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 18 окт. 2023 г. by MDN contributors.