Background html position: 🤷🏽‍♀️ Page not found | MDN Web Docs

document.getElementById («myDiv»).style.backgroundPosition;

Попробуй сам »

Связанные страницы

Учебник

CSS: фон CSS

Ссылка CSS: свойство background-image

Ссылка CSS: свойство background-position

Ссылка на HTML DOM: свойство фона

❮ Объект стиля

background-position-x — CSS: каскадные таблицы стилей

Свойство CSS background-position-x задает начальное положение по горизонтали для каждого фонового изображения.Положение относительно слоя положения, установленного параметром background-origin .

Значение этого свойства переопределяется любым объявлением сокращенных свойств background или background-position , применяемых к элементу после него.

 
фон-позиция-х: слева;
background-position-x: center;
background-position-x: right;


background-position-x: 25%;


фон-позиция-x: 0px;
background-position-x: 1 см;
фон-позиция-x: 8em;


background-position-x: right 3px;
background-position-x: слева 25%;


background-position-x: 0px, по центру;


фон-позиция-x: наследовать;
фон-позиция-x: начальная;
фон-позиция-x: вернуться;
background-position-x: отключено;
  

Свойство background-position-x задается как одно или несколько значений, разделенных запятыми.

Значения

слева

Выравнивает левый край фонового изображения по левому краю слоя положения фона.

центр

Выравнивает центр фонового изображения по центру слоя положения фона.

правый

Выравнивает правый край фонового изображения по правому краю слоя положения фона.

<длина>

Смещение левого вертикального края заданного фонового изображения от левого вертикального края слоя положения фона. (Некоторые браузеры позволяют назначать для смещения правый край).

<процент>

Смещение горизонтального положения заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера контейнер, поэтому значение 50% центрирует фоновое изображение по горизонтали.

Базовый пример

В следующем примере показана простая реализация фонового изображения с background-position-x и background-position-y, используемыми для определения горизонтального и вертикального положения изображения отдельно.

HTML

CSS

  div {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  цвет фона: голубой;
  background-image: url (https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  фон-повтор: без повторения;
  background-position-x: center;
  background-position-y: нижние 10 пикселей;
}
  

Результат

Таблицы BCD загружаются только в браузере

Свойство CSS: background-position | HTML Dog

Может содержать одно или, чаще всего, два значения.

HTML / CSS background-position | Блог Electric Toolbox

Положение фона HTML / CSS может быть установлено с помощью пикселей,% и констант top, center, bottom для вертикального позиционирования и left, center, right для горизонтального позиционирования.В этом посте рассматривается порядок, в котором они должны располагаться, и «подводные камни», которые могут вас уловить при переходе от констант к пикселям.

background-position

Порядок для background-position должен быть горизонтальным положением, за которым следует вертикальное положение, например:

 background-position: left | center | right top | center | bottom; 

Можно использовать константы, пиксели и / или проценты, и их всегда следует указывать в следующем порядке: по горизонтали и по вертикали. Однако на практике, когда используются константы, браузеры принимают порядок в любом случае.

фон

И, конечно, положение фона также может быть установлено как часть комбинированного объявления фона, например:

 фон: url (/images/red.png) справа по центру без повтора; 

И снова, позиционная часть должна быть горизонтальной, а затем вертикальной.

Примеры

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

Текущие версии Firefox и IE не терпимы к порядку (т.е.е. он должен быть горизонтальным, а не вертикальным) при смешивании констант с измерениями пикселей, но Chrome и старые браузеры (например, IE8 в режиме совместимости, IE <8) более терпимы, как показано ниже.

Пример — background-position: top center

В первом примере показан пример использования констант в неправильном порядке. Они правильно отображаются как в Chrome, так и в FF, то есть в центре окна по горизонтали и вверху.

Пример — background-position: center top

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

Пример — background-position: 50px left

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

Как вы можете видеть на скриншоте ниже, он отображается так, как мы могли ожидать, в Chrome (и в других браузерах, о которых я упоминал ранее), но не в Firefox, где он все еще находится в верхнем левом углу.

Пример — background-position: left 50px

А теперь вернемся к предыдущему примеру с правильным округлением сначала с горизонтальной константой.Теперь он отображается как ожидалось в обоих браузерах.

Пример — background-position: top 50px vs 50px top

Следующие два примера такие же, как и два предыдущих, но иллюстрируют проблему, когда вертикальная константа помещается в горизонтальное положение, а значение — в другое. Первый не будет правильно отображаться в FF, но второй (в правильном порядке) будет.

Пример — background-position: 100px 50px

И последний пример просто показывает горизонтальную позицию фона 100px с позицией фона 50px, чтобы проиллюстрировать порядок.

Заключение и «ошибка»

Я часто вижу примеры CSS в Интернете, где вы видите что-то вроде «background-position: top left», что заставляет людей думать, что правильный порядок — вертикальный, а не горизонтальный. Я сам попадал в эту ловушку много раз раньше, и только когда я случайно смотрю на макет в Firefox, я понимаю, что что-то не так.

Проблема в том, что вы начинаете с «background-position: top left», а затем переходите к изменению, например «Left» на что-то вроде «50px», только положение фона теперь смещено, как это в некоторых браузерах, но не в других.В зависимости от того, в каком браузере вы разрабатываете, вы можете не заметить, что это проблема, но позже.

Итак, вывод этого поста состоит в том, чтобы всегда ставить горизонтальное положение на первое место, а на второе — на вертикальное. Если по умолчанию константы вверху и слева, сделайте это следующим образом:

 background-position: left top; 

, и вы не должны столкнуться с этой проблемой.

background-position · Документы WebPlatform

Сводка

background-position позволяет вам установить размещение фонового изображения на элементе, к которому оно применяется.background-position обычно принимает два значения, которые устанавливают горизонтальное и вертикальное положение фонового изображения внутри элемента.

Обзорная таблица

Начальное значение

0% 0%

Относится к

Все элементы

Унаследовано

Нет

Медиа

визуальный

Расчетное значение

Список, каждый элемент которого состоит из: двух ключевых слов, представляющих начало координат, и двух смещений от этого источника, каждое из которых задано как абсолютная длина (если задано ), иначе как процент.

Анимационный

Да

Свойство объектной модели CSS

фон Позиция

В процентах

См. Размер области позиционирования фона за вычетом размера фонового изображения.

Синтаксис

• background-position: 30% 15%, 40% 80%, 10px 10px
• background-position: length length
• background-position: процентное соотношение
• фон-позиция: процент
• background-position: bottom length right length
• background-position: left вверху

Значения

длина длина

Любые стандартные единицы CSS приемлемы в качестве значений background-position : px, ems, rems, mm, cm и т. Д.Обратите внимание, что значения единиц определяют расстояние между верхним левым углом фонового изображения и верхним левым углом элемента. Дополнительные сведения об этих единицах измерения см. В разделе «Единицы длины».

процентов процентов

Percentages приемлемы для значений background-position и задают проценты от общей ширины и высоты рассматриваемого элемента. Обратите внимание, что процентные значения определяют расстояние между верхним левым углом фонового изображения и верхним левым углом элемента.

слева вверху

background-position также может быть выражено как ключевые слова: left top, top, right top, left, center, right, left bottom, bottom, right bottom. Эти значения не относятся конкретно к положению верхнего левого угла фонового изображения, а скорее относятся к общему положению фонового изображения внутри элемента. Так, например, значение right top заставит сайт фонового изображения выровняться с верхней и правой сторонами элемента, к которому оно применяется; верхний левый угол не будет помещен в верхний правый угол элемента!

процентов

Если включено только одно значение, оно принимается как значение по горизонтали, а значение по вертикали устанавливается как центр .

30% 15%, 40% 80%, 10 пикселей 10 пикселей

Если вы применили несколько фоновых изображений к элементу, вы можете дать каждому фоновому изображению другое положение, указав несколько значений положения фона, разделенных запятыми. Предоставленные значения будут циклически меняться, так что всем изображениям будет присвоено background-position , например, если указаны четыре фоновых изображения и только два значения положения, позиция 1 будет применяться к изображениям 1 и 3, а позиция 2 — к изображениям 2 и 4.

длина снизу длина справа

CSS3 включает новый синтаксис с четырьмя значениями background-position , который позволяет вам выбрать, с каких сторон элемента вы позиционируете фоновое изображение относительно (значения 1 и 3), а затем расстояние от этих сторон (значения 2 и 4). Итак, в этом примере говорится, что вы хотите расположить фоновое изображение на 10 пикселей от нижнего края элемента и на 15 пикселей справа. Если вы пропустите одно из значений смещения, другое принимается равным 0.

Примеры

Простой набор из пяти блоков.

  
 Один 
 Два 
 Три 
 Четыре 
 Пять 
  

Этот CSS применяет одно и то же фоновое изображение и базовый стиль к каждому div, но затем каждому div дается различная позиция фона, чтобы варьировать, где размещается фоновое изображение.

  div {
  фоновое изображение: URL (images / icon.png);
  фон-повтор: без повторения;
  семейство шрифтов: без засечек;
  размер шрифта: 16 пикселей;
  межбуквенный интервал: -1px;
  ширина: 200 пикселей;
  высота: 100 пикселей;
  маржа справа: 10 пикселей;
  граница: 1px solid #aaa;
  плыть налево;
  высота строки: 100 пикселей;
  выравнивание текста: центр;
  радиус границы: 10 пикселей;
  текст-преобразование: прописные буквы;
  тень текста: 1px 1px 1px черный;
  box-shadow: 2px 2px 5px #ccc;
  padding-top: 2 пикселя;
}


.один {
  фоновая позиция: вверху слева;
}

.два {
  фоновое положение: 2 бэр 1 бэр;
}

.три {
  фоновая позиция: 40% 80%;
}

.four {
  фоновая позиция: 30 пикселей;
}

.пять {
  background-position: нижние 30 пикселей справа 50 пикселей;
}
  

Посмотреть живой пример

Внешний контейнерный блок с несколькими внутренними блоками.

Каждому внутреннему div присваивается один и тот же базовый стиль, и к нему применено одно и то же фоновое изображение.Затем каждому отдельному div присваиваются разные значения top и left, чтобы расположить его в другом месте, и другое значение background-position для отображения другого спрайта. Каждый спрайт имеет размер 128 x 128 пикселей, а внутренние блоки div имеют размер 128 x 128 пикселей, поэтому каждый из них будет отображать одновременно только один спрайт. Вам нужно правильно расположить фон, чтобы отображался весь спрайт, а не часть двух спрайтов.

  body> div {
  ширина: 1024 пикселей;
  высота: 640 пикселей;
  маржа: 5 бэр авто;
  фон: linear-gradient (вверху справа, rgba (0,0,0,0), rgba (0,0,0,0.4));
  цвет фона: #ccc;
  радиус границы: 64 пикселя;
  box-shadow: 0px 0px 30px черный;
  положение: относительное;
}

div div {
  ширина: 128 пикселей;
  высота: 128 пикселей;
  позиция: абсолютная;
  фон: url (sprites.png);
}

#спасти {
  верх: 64px;
  слева: 64px;
  фоновая позиция: 0px 0px;
}

#настройки {
  верх: 192px;
  слева: 192px;
  background-position: -128px 0px;
}

#люди {
  верх: 320 пикселей;
  слева: 448 пикселей;
  background-position: -256px 0px;
}

#поиск {
  верх: 320 пикселей;
  слева: 64px;
  фоновая позиция: -384px 0px;
}

#Отмена {
  верх: 448 пикселей;
  слева: 576 пикселей;
  background-position: -512px 0px;
}

#Ok {
  верх: 448 пикселей;
  слева: 704px;
  background-position: -640px 0px;
}

#назад {
  верх: 192px;
  слева: 832px;
  background-position: -768px 0px;
}

#вперед {
  верх: 320 пикселей;
  слева: 832px;
  background-position: -896px 0px;
}
  

Посмотреть живой пример

Использование

  * background-position хорошо поддерживается во всех браузерах.Однако имейте в виду, что некоторые типы данных CSS являются недавним дополнением к языку и не поддерживаются в старых браузерах.
  

• CSS-спрайты — это очень распространенный метод, используемый для отображения нескольких небольших изображений на веб-странице с уменьшением размера файла и HTTP-запросов. Все изображения, о которых идет речь, хранятся в одном файле изображения, который применяется к нескольким различным элементам на странице; различные части этого файла затем отображаются путем изменения значений background-position .См. Пример 2 для этого в действии.
• Синтаксис с четырьмя значениями не очень широко поддерживается браузерами.

Связанные спецификации

CSS 2.1 Цвета и фон

Рекомендация W3C

CSS Backgrounds and Borders Module Level 3

W3C кандидат в рекомендации

См. Также

Статьи по теме

Фон

Атрибуты CSS

Другие статьи

Положение фона

Положение фона

Свойство background-position задает начальную позицию указанного фонового изображения.Это свойство может применяться только к элементам уровня блока и заменяемым элементам. (Замещенный элемент — это элемент, для которого известны только внутренние размеры; замененные элементы HTML включают IMG , INPUT , TEXTAREA , SELECT и OBJECT .)

Самый простой способ назначить позицию фона — использовать ключевые слова:

• Горизонтальные ключевые слова ( слева , по центру , справа )
• Вертикальные ключевые слова ( верхний , центральный , нижний )

Проценты и длины также могут использоваться для определения положения фонового изображения.Проценты относятся к размеру элемента. Хотя длины разрешены, они не рекомендуются из-за присущих им недостатков в работе с разными разрешениями дисплеев.

При использовании процентов или длины сначала указывается горизонтальное положение, а затем вертикальное положение. Такое значение, как 20% 65% , указывает, что точка 20% по ширине и 65% вниз по изображению помещается в точку 20% по горизонтали и 65% вниз по элементу. Такое значение, как 5px 10px , указывает, что левый верхний угол изображения размещается на 5 пикселей справа и на 10 пикселей ниже левого верхнего угла элемента.

Если задано только значение по горизонтали, положение по вертикали будет 50%. Допускаются комбинации длин и процентов, а также отрицательные позиции. Например, 10% -2см разрешено. Однако проценты и длины нельзя комбинировать с ключевыми словами.

Ключевые слова интерпретируются следующим образом:

• вверху слева = слева вверху = 0% 0%
• верх = верх по центру = по центру верх = 50% 0%
• справа вверху = вверху справа = 100% 0%
• слева = слева по центру = по центру слева = 0% 50%
• центр = центр центр = 50% 50%
• справа = справа по центру = по центру справа = 100% 50%
• внизу слева = слева внизу = 0% 100%
• внизу = внизу по центру = по центру внизу = 50% 100%
• внизу справа = справа внизу = 100% 100%

Если фоновое изображение зафиксировано относительно холста, изображение размещается относительно холста, а не элемента.

Авторы также могут использовать сокращенное свойство background , которое в настоящее время поддерживается лучше, чем свойство background-position .

Индекс CSS ~
Структура CSS ~
CSS свойства

Дом,
Форумы,
Ссылка,
Инструменты,
FAQs,
Статьи,
Дизайн,
Ссылки

Copyright © 1996 — 2006. Все права защищены.

Div боксов (тегов) — положение абсолютное, относительное и фиксированное

Учебник Уикхема по HTML и CSS

Карта сайта |
Главная |
Поиск

Просмотр в Firefox, Safari, Opera и IE, но IE6 часто требует других решений.В целом IE7 и IE8 отображаются как Firefox, за исключением функций HTML5 и CSS3. Обновления IE9 и выше в основном связаны с проблемами HTML 5 и CSS3 и отображаются в значительной степени, как и другие основные браузеры. Google Chrome основан на том же движке WebKit, что и Safari.

Некоторые примеры приведены только для того, чтобы показать проблемы, другие показывают решения, которые работают в большинстве основных браузеров. Используйте подходящий вам пример. Предупреждение о проблемах
: работает в некоторых ситуациях или некоторых браузерах или требует ухода, чтобы отображать как вы хотите ОК в Firefox, Safari, Opera, Google Chrome и IE

Пять свойств для позиции

В трех основных схемах позиционирования, описанных ниже, есть пять свойств положения: статическое, относительное, абсолютное, фиксированное и наследование.Для простоты эти три используются в следующих примерах: абсолютный, относительный и фиксированный. Позиционирование может применяться к любому элементу блока; следующие примеры сконцентрированы на использовании блоков div (тегов div), которые являются блочными элементами, и они, вероятно, наиболее часто используют позиции.

Положение: статическое; — это значение по умолчанию, при котором, если у него нет верхней, правой, нижней или левой позиции, элемент блока просто следует в порядке кода и начинает новую строку. Обычно нет необходимости указывать position: static, если вы не хотите отменить одно из других свойств.[Встроенные элементы будут на одной строке, если есть место и позиция не применяется].

Используйте View, Source или щелкните правой кнопкой мыши & Page Source в большинстве браузеров, чтобы увидеть код для следующих примеров.

Div с положением: абсолютное;

1 Серебряный родительский блок div — position: relative; так, чтобы он тек в нужной позиции в тексте страницы. Родительский элемент when position: relative формирует контейнер, из которого элементы div position: absolute занимают свои позиции. Если родительский элемент, содержащий div, не существует или не имеет position: relative; позиция: абсолютные блоки div будут отображаться в верхней части экрана, занимая свои позиции из контейнера главной страницы или тела всей страницы.

позиция: абсолютная; верх: 70 пикселей; слева: 255 пикселей; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель; (без высоты)

позиция: абсолютная; верх: 10 пикселей; слева: 3 пикселя; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель

позиция: абсолютная; верх: 25 пикселей; слева: 507 пикселей; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пикс

Код CSS в основной таблице стилей: —

• div {padding: 3px; граница: сплошной черный 1px; }
• .фон {цвет фона: # c0c0c0; отступ: 0; цвет: # 335500; }

Код разметки HTML: —

Новичку может быть проще построить всю страницу с помощью блоков position: absolute, потому что все они останутся там, где они размещены, и каждый из них может быть перемещен, не затрагивая другие.При изменении разрешения экрана все блоки div сохраняют свои позиции, и может потребоваться прокрутка. Однако по мере накопления опыта научитесь использовать position: relative для более плавного дизайна.

Порядок, в котором коды появляются в html-файле, не имеет значения, поскольку все блоки div занимают свои позиции из тела или основного контейнера, включающего все содержимое, и не соответствуют предыдущему коду. В приведенном выше примере блоки div были помещены в родительский контейнер и должны находиться внутри кода контейнера, но в любом порядке.Здесь необходим родительский контейнер, потому что приведенный выше текст может изменить положение на странице, если средство просмотра изменяет размер текста, поэтому родительскому div присваивается положение: относительно потока с текстом.
Сначала кодируется azure div, но это не имеет значения, если все три кодируются в родительском контейнере.

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

Будьте осторожны, если вы используете div’ы position: absolute вместе с div, которые не являются position: absolute (или position: fixed), потому что div’ы position: absolute (или position: fixed) находятся за пределами нормального потока и не обращают внимания на какой-либо код за пределами их, что означает, что текст или изображение в div, которые не являются position: absolute (или position: fixed), не будут знать о них и перетекать над ними или позади них.

Эти div, если они не находятся в элементе position: relative, часто используются для логотипов сбоку страницы, где они не будут конфликтовать ни с чем другим, или они используются для содержания всего на странице, так что все divs имеют постоянное положение. и ни один из них не может перемещаться в зависимости от того, как код реагирует на разрешение окна, например, переход к строке ниже при более низком разрешении экрана.

Один из вариантов для новичка — применить принцип, использованный в моем примере, ко всей странице.Используйте div с position: relative в качестве содержащего div для всей страницы с margin: auto, чтобы он центрировался при высоких разрешениях экрана. Внутри содержащего div сделайте все div позициями: absolute, чтобы новичку было проще позиционировать. Содержащий блок div будет перемещаться вбок, поскольку он центрируется в разных разрешениях, но внутренние блоки position: absolute останутся на своих выделенных позициях. Однако по мере накопления опыта научитесь использовать position: relative для более плавного дизайна.

Типичная разметка HTML (исключая doctype, теги html и элементы раздела заголовка): —

Это помогает временно использовать background-colors для div, чтобы увидеть размер и положение каждого div и удалить цвета позже.

Div с положением: относительное;

2 Div — это блочный элемент (список других элементов см. По ссылке). Если вы закодируете несколько блочных элементов, таких как div, с position: relative или без указания позиции, они будут отображаться один под другим. Элементы с position: relative или no position должны быть закодированы в разметке HTML в том порядке, в котором вы хотите, чтобы они обрабатывались (обычно это порядок, в котором вы хотите, чтобы они отображались на экране).

[Вот список встроенных элементов.Встроенные элементы обычно следуют друг за другом в одной строке, но это не относится к div, если вы не кодируете как display: inline-block; который заставляет блочный элемент вести себя как встроенный элемент или применять float, который по-прежнему оставляет элемент как блочный элемент, но позволяет ему плавать либо внутри другого содержимого, либо в той же строке, что и другой плавающий div. См. Пункт 3.]

Необычно указывать верхнее или нижнее, левое или правое положение с помощью position: relative; тем не менее, эти позиции могут использоваться для перемещения div относительно того места, где он обычно находится в нормальном потоке содержимого страницы, но при перемещении остается пространство, где бы div располагался, поэтому используйте эти позиции с осторожностью.
Текст в блочных элементах, таких как теги

…

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

Веселье начинается, когда вы используете поплавки и смешиваете их с не плавучими элементами блока. Верхняя и левая позиции ниже были опущены, а добавлено float: left. Нет необходимости использовать родительский контейнер, если div используют position: static или position: relative, потому что они будут течь в окружающем содержимом.

положение: относительное; плыть налево; ширина: 140 пикселей; высота: 70 пикселей; маржа справа: 3 пикселя;

Если плавающие блоки div используются с относительным позиционированием без указания верхнего и левого положения, каждый блок позиционируется относительно соседних блоков div или других элементов блока в html-файле. Инструкция на плавание скажет ему двигаться относительно нормального относительного положения.
Без инструкции float: left в div слева не было бы текста, обтекающего его; весь этот текст в

…

теги будут начинаться ниже div, потому что они закодированы после div.
Приведенный выше пример будет плавать справа внутри текста, если было указано float: right и если div был помещен перед текстом в html-файле.

Если блоки div не имеют заявленной ширины или высоты или заданы проценты, с разными разрешениями экрана или размером текста некоторые блоки изменятся в размере, создавая плавный макет и перемещая следующие блоки, поэтому следует позаботиться о том, чтобы макет страницы не был нарушен.

3

положение: относительное; плыть налево; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель

положение: относительное; плыть налево; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель; (без высоты)

положение: относительное; плыть налево; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пикс

ВАЖНО: этот абзац начинается с

, чтобы очистить поплавок (левый, правый или оба), чтобы он не начинался в доступном пространстве рядом с розовым div выше.Плавающие элементы не передают свою высоту родительскому контейнеру, поэтому необходимо очистить плавающие элементы, иначе следующий элемент окажется слишком высоко.
Все div с плавающей точкой должны быть закодированы в html-файле в том порядке, в котором они должны появляться. Элемент float: left сообщает первому div, что он готов стать частью последовательности с плавающей запятой. Div без float обычно запускается с новой строки, а первый div с float в последовательности float обычно начинается с новой строки. Все div должны находиться в одной строке рядом друг с другом.Аналогичные правила применяются к float: right. Float: left и float: right можно использовать вместе, и обычно div’ы float: right кодируются последними.
Кажется, что то, плавает ли div рядом с предыдущим, контролируется предыдущим div с плавающей точкой или его отсутствием, и если div без float следует за div с плавающей точкой, IE6 и IE7 ведут себя иначе, чем IE8 и выше и Firefox, см. следующий пример.

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

Для получения дополнительных примеров плавающих div см. Макеты с двумя и тремя столбцами

4 У лазурного div нет float: left, но есть место рядом с розовым div, а у розового div есть float: left, поэтому лазурный div занимает пространство рядом с розовым div в IE6 и IE7, но в Firefox и IE8 и выше, лазурный div полностью покрывает розовый div, хотя текст находится под розовым div.
Примечание: если позиция: relative не была указана в лазурном div, она все равно была бы ниже розового div в IE8 и выше и Firefox, но розовый div будет отображаться; см. пример 4a для макетов с двумя и тремя столбцами.
Однако у желтого div есть float: left, а у лазурного div нет, поэтому желтый div переворачивается как обычно и идет как можно дальше влево, что находится напротив нижней части розового div в IE6 и IE7, но в сторону крайний левый в IE8 и выше и Firefox.

положение: относительное; плыть налево; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый;

положение: относительное; ширина: 240 пикселей; цвет фона: лазурный; (без высоты и без поплавка)

положение: относительное; плыть налево; ширина: 210 пикселей; высота: 75 пикселей; цвет фона: желтый;

Div с положением: фиксированное;

5a Позиция: фиксированная не поддерживается IE6, но поддерживается IE7 и более поздними версиями, Firefox, Opera и Safari.
В указанных выше браузерах этот розовый div отображается в верхнем левом углу экрана, где он был расположен, и остается на том же месте при прокрутке. Стиль отображается внутри div. Однако IE6 не поддерживает position: fixed и показывает его в позиции после этого текста, где он был закодирован, и он будет прокручиваться.

Позиция 5а: — положение: фиксированное; верх: 70 пикселей; слева: 30 пикселей; ширина: 220 пикселей; высота: 40 пикселей;

Позиция: необходимо разместить фиксированный div с учетом предполагаемого размера области просмотра.Div с position: fixed; top: 700px никогда не будет отображаться на экране с разрешением 800 x 600, и при прокрутке он не появится.

Просмотрите эту страницу в IE7 и более поздних версиях, Firefox, Opera или Safari при разных разрешениях экрана и убедитесь, что div position: fixed pink будет отображаться в той же позиции на экране, но основное содержимое будет смещено, поскольку оно центрировано с помощью поля: auto .

Стили: —

# fixed1 {position: fixed; верх: 70 пикселей; слева: 30 пикселей; ширина: 220 пикселей; высота: 40 пикселей; цвет фона: розовый; }

5b Можно зафиксировать положение div от верхней части окна, но разрешить ему центрироваться по горизонтали.Это полезно, если вы хотите, чтобы строка меню находилась в верхней части окна, но чтобы она располагалась по центру при разных разрешениях окна. Требуются два div, и ниже показаны два метода кодирования. Разметка html одинакова для обоих, но я дал каждому другой идентификатор, чтобы показать оба метода. Поместите div в самый верх страницы (а не в пространство, как я) и задайте для div цвет фона, чтобы нижнее содержимое не отображалось при прокрутке.

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

Метод 1 имеет содержащую позицию div: fixed, которая фиксируется по вертикали, но также фиксируется слева и справа от окна. Внутренний div имеет ширину и margin: auto по центру в пределах ширины окна position: fixed div: —

Стили: —

# fixedtop1 {position: fixed; верх: 5 пикселей; слева: 0; справа: 0; граница: нет; z-индекс: 50; }
# center250a {width: 250px; маржа: авто; цвет фона: # f0ffff; }

Метод 2 имеет содержащий div с шириной и полем: автоматически по центру.Внутренний div имеет position: fixed с той же шириной и заполняет пространство ширины содержащего div, но останется фиксированным по вертикали: —

Стили: —

# center250b {ширина: 250 пикселей; маржа: авто; граница: нет; }
# fixedtop2 {position: fixed; ширина: 250 пикселей; верх: 85 пикселей; цвет фона: # f0ffff; z-индекс: 50; }

Я поместил фактический код разметки после тега body, потому что div без position: fixed имеет высоту, которая оставляет пространство в содержимом страницы, если я помещаю его в другое место, но если вы используете этот код для меню вверху вы можете настроить верхнее поле следующего div по своему усмотрению.Центрирование двух методов немного отличается, потому что один учитывает поле тела страницы, а другой — нет.

Обычно

См. W3.org параграф 9.8 для подробного сравнения нормального потока (полученного с положением: относительное или не указанное) и положением: абсолютным. Вы запутаетесь, читая это, поэтому поэкспериментируйте с простым примером.

w3.org пункт 9.3 говорит: —
В CSS2 блок может быть размещен по трем схемам позиционирования:

1.Нормальный расход. В CSS2 нормальный поток включает в себя форматирование блоков блоков, встроенное форматирование встроенных блоков, относительное позиционирование блоков или встроенных блоков, а также расположение компактных блоков и блоков ввода.
2. Плавает. В модели с поплавком ящик сначала выкладывается в соответствии с нормальным потоком, затем вынимается из потока и смещается влево или вправо, насколько это возможно. Контент может течь по бокам поплавка.
3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (он не влияет на последующих братьев и сестер) и ему назначается позиция по отношению к содержащему блоку.

Следует проявлять осторожность с текстом в полях div. Некоторые из вышеперечисленных div недостаточно велики для текста наибольшего размера, и отображение отличается в IE6 и Firefox, но обычно означает, что либо div расширяется вниз по нижнему тексту (IE6), либо текст расширяется за пределы div (Firefox и IE7 и выше).

Для

Div, разработанных с процентным размером, можно дать десятые доли процента, но в результате будет на 1 пиксель выше или ниже точного вычисления. Например, для разрешения экрана 800 пикселей, что дает чистую ширину около 780 пикселей, 25.1% составляет 195,78 пикселей, что приведет к 195 или 196 пикселей в зависимости от других расчетов содержимого.

В идеале блоки div должны быть спроектированы без высоты, чтобы они были гибкими по высоте, если средство просмотра установило в браузере текст большего размера. Однако Firefox дает div без определенной высоты высоту, равную нулю, и это означает, что это влияет на цвета фона или изображения (см. Различия фона Firefox / IE). В таких случаях лучше всего задать для div фиксированную высоту.

См. W3.Коробочная модель org здесь.

Помните, что когда Doctype включается в заголовок перед тегом html (как и должно быть), тогда общая ширина div равна его определенной ширине плюс границы, поля и ширина отступов. В некоторых старых руководствах, включая «CSS с нуля» (см. Мою страницу «Ссылки»), говорится, что Internet Explorer помещает отступы и границы внутри блока div. Так было с очень ранними версиями IE и все еще так с IE6 до IE9, если Doctype не используется (но вы должны его использовать).

6 Это показывает, как IE совпадает с Firefox при использовании Doctype. Заполнение и границы рассчитываются нестандартно. Изображение имеет ширину 200 пикселей, а размер div: 200 пикселей, но общая ширина больше.

Этот div имеет тот же размер, что и изображение ниже: 200 x 50 пикселей с отступом: 20 пикселей;

Этот div имеет тот же размер, что и изображение выше: 200 x 50 пикселей с границами: 20 пикселей;

См. Раздел «Отступы и границы без Doctype», чтобы увидеть разницу между IE6 и IE9 и Firefox, когда Doctype не используется.IE10 отображается так же, как Firefox и большинство других браузеров.

Если вы хотите, чтобы div составлял часть текста, вы не можете поместить div в тег p, тег p должен быть заменен на div.

Первая часть текста в div

текст или содержимое среднего блока

остатка текста в другом div.

Код для вышеуказанного: —

& nbsp; просто создает «жесткое» пространство, другими словами, гарантирует, что пространство создается в тех местах, где код иногда не предоставляет пробел.

Если вы хотите получить внешний вид блока div, создав цветную рамку с текстом в нем, альтернативой использованию трех блоков будет следующая: —

Первая часть текста или содержимое средней части остатка текста.

Код для вышеуказанного: —

Первая часть текста текст или содержимое средней части остаток текста.

Его преимущество заключается в том, что текст до и после «блока» не содержится в разделах div, что может вызвать проблемы с отображением при более низких разрешениях экрана, поскольку они могут переворачиваться вниз, оставляя место, где текст обычно продолжался бы в той же строке.

Золотые правила

Вот несколько золотых правил, но из-за сложности позиционирования есть много исключений: —

Позиция: абсолютная; если вы поместите все на странице в блочный элемент (например, div) с position: absolute, каждый будет иметь свое место, не мешая другим.

Должность: относительная; часто нет необходимости указывать это, но необходимо указать, если внутри него находятся элементы div position: absolute и требуется, чтобы они брали свою позицию из него. Чтобы найти правильную комбинацию положения, часто требуется определенное количество проб и ошибок: указанное относительное или не указанное, а также указанное или не указанное с плавающей точкой. Поплавки необходимы для отображения элементов блока рядом.

Не использовать bottom: 0; или любое другое число, чтобы закрепить блоки в нижней части экрана или связанные с ним.Если вы это сделаете, а затем используете меньшее разрешение экрана, вы обнаружите, что другой контент также хочет достичь дна и будет закрыт div, закрепленным внизу. Прокрутка не заставит его появиться.
Это ненадежно в IE6, но блоки position: fixed для нижнего колонтитула работают в IE7 и выше и Firefox, как показано в нижнем колонтитуле, привязанном к нижней части экрана. Будьте осторожны, если сделаете это.

Примечания

Просмотр / Исходный код или Просмотр / Исходный код страницы в меню браузера, чтобы увидеть весь HTML-код.

Тело этой страницы имеет поля: 20 пикселей. Большинство блоков div имеют border: 1px solid #black и padding: 3px, закодированные в таблице стилей tutorial.css.

Примеры выше находятся в содержащем div с шириной: 730 пикселей; и маржа: авто; так что они централизованы при больших разрешениях экрана.

В моих примерах много кодов было помещено в теги html, а не в таблицу стилей или стиль в голове. Я сделал это для удобства зрителя, чтобы большинство (но не все) коды находились в одном месте, и таблицу стилей не всегда нужно было просматривать дополнительно.При кодировании вашей собственной страницы вы должны попытаться поместить как можно больше в таблицу стилей и связать с идентификатором или классом тег html.

Помните, что когда Doctype включен над заголовком перед тегом html (как и должно быть), тогда общая ширина div равна его определенной ширине плюс границы, поля и ширина отступов.

Если есть различия между Firefox и IE6, которые нельзя преодолеть с помощью одного кода, сначала напишите код, чтобы получить удовлетворительное решение в Firefox, а затем создайте стиль IF, который будет применяться только к IE6: —
например, если margin-top: 20px; в Firefox должно быть margin-top: 30px; в IE6 поместите в заголовок страницы html / xhtml следующее: —

или, если есть много разных стилей, создайте отдельную таблицу стилей: —

IE6 будет содержать только измененные стили, такие как div {margin-top: 30px; } и другие (без тегов head, body или Doctype).

При просмотре исходной страницы этого сайта вы можете увидеть код вида & lt; p> Маленькая цапля & lt; / p> вместо

Маленькая цапля

. Код & lt; потому что в этом случае код должен отображаться на экране в виде текста. Если бы в код был помещен символ <, браузер активировал бы код, и он не отображался бы в виде текста.Такой код обычно не требуется при написании тегов HTML-кода, которые необходимо активировать.

© Wickham, 2006 г., обновлено 2013 г.

наверх | Карта сайта | предыдущая | следующий

.