Position (absolute, relative и fixed)

Базовый поток документа

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


Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде.

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</body>

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

<body>
  Этот элемент находится позади других элементов.
  <div>
    Этот вложенный элемент принадлежит воображаемому слою, который находится поверх слоя родителя.
    <span>Этот элемент ещё ближе к нам, его слой располагается над слоем уже его родителя.</span>
  </div>
</body>

В-третьих, положение элемента в потоке зависит от значения свойства .

<body>
  <div class="block-1"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span><span class="inline-3">inline 3</span><span class="inline-4">inline 4</span></div>
  <div class="block-2"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span></div>
  <div class="block-3"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span><span class="inline-3">inline 3</span></div>    
</body>

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

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

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

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

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

К этим свойствам относятся и .

语法

 属性被指定为从下面的值列表中选择的单个关键字。

取值

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 , , ,  和 属性无效。
该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。 属性会创建新的层叠上下文。当元素祖先的 ,  或  属性非 时,容器由视口改为该祖先。
元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于, , , 和 的值进行偏移。偏移值不会影响任何其他元素的位置。

Примеры

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

<style type="text/css">
.pitem {
	position: static;
}
</style>
<script type="text/javascript">
function fnAbsolute(){
   oSpan.style.position="absolute";
}
function fnRelative(){
   oSpan.style.position="relative";
}
function fnStatic(){
   oSpan.style.position="static";
}
</script>
<p><span id="oSpan" class="pitem">Это <b>афрагмент</b> параграфа текста.</span> 
This is a paragraph of text.</p>
<input onclick="fnRelative()" type="button" value="Relative">
<input onclick="fnAbsolute()" type="button" value="Absolute">
<input onclick="fnStatic()" type="button" value="Static"> 

示例

相对定位

相对定位的元素是在文档中的正常位置偏移给定的值,但是不影响其他元素的偏移。下面的例子中,注意未应用定位的其它元素是按照 «Two» 在正常位置的情况下进行布局的。

 HTML 内容

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

绝对定位


相对定位的元素并未脱离文档流,而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时,绝对定位元素不占据空间。绝对定位元素相对于最近的非 祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。例子不严谨,待修正下面的示例中,»Three» 元素不存在应用了定位的祖先元素,因此该元素相对于紧邻的祖先(iframe 中的 <body> 元素)绝对定位。

HTML 内容

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}

#three { 
   position: absolute; 
   top: 20px; 
   left: 20px; 
}

固定定位

固定定位与绝对定位相似,但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中,»One» 元素定位在离页面顶部 80px,离页面左侧 20px 的位置。

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>
  <div class="box" id="one">One</div>
</div>

CSS 内容

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

当浏览页面顶部时,定位元素处于左上角。在滚动后,它相对于 viewport 视口仍处于同一位置。

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时,始终处于 A 的下方。而在开始滚动 B 部分时,B 的头部会固定在屏幕顶部,直到所有 B 的项均完成滚动后,才被 C 的头部替代。

须指定 , , 或  四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

HTML 内容

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </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)

Установка абсолютного позиционирования элементу осуществляется посредством задания ему .

Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.

Позиционирование выполняется относительно ближайшего позиционированного предка.

<div id="id-1" style="position: absolute">
  <div id="id-2" style="position: relative">
    <div id="id-3" style="position: absolute">
      ...
    </div>
  </div>
</div>

Под позиционированным элементом понимается элемент с , равным , , или .

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


Если данный элемент не был бы позиционированным, то позиционирование выполнялось бы относительно :

<div id="id-1" style="position: absolute">
  <div id="id-2">
    <div id="id-3" style="position: absolute">
      ...
    </div>
  </div>
</div>

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

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

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

<div class="container">
  <div class="element-1">FIRST ELEMENT</div>
  <!-- элемент имеет абсолютное позиционирование и ему не установлены CSS-свойства top, bottom, left и right -->  
  <div class="element-2" style="position: absolute;">SECOND ELEMENT</div>
  <div class="element-3">THIRD ELEMENT</div>
</div>

CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с .

CSS-свойства , , и задают положение элемента относительно ближайшего позиционированного предка или , если такого предка нет.

Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат и ( и ).

Если элементу одновременно установить , и , то предпочтение будет отдано и .

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

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 200px; position: absolute; top: 50px; left: 100px; border: 1px solid black; background:red;"></div>
</body>

Моё первое знакомство с «липким» позиционированием

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

При первом знакомстве с все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.

Пример:

.some-component {  position: sticky;  top: 0;} 

Проблема в том, что иногда это работает, а иногда нет. Когда всё работает, то элемент и правда залипает. Но когда не работает, то при прокрутке элемент перестаёт залипать

Как человеку, который живёт одним только CSS, мне было важно разобраться в сути проблемы. Именно поэтому я решил тщательно изучить «липкое» позиционирование

position (существительное)[править]

ед. ч. мн. ч.
position positions

position

Существительное.

Корень: .

Семантические свойстваправить

Значениеправить

  1. положение, местоположение; место; позиция, расположение ◆ Отсутствует пример употребления (см. рекомендации).
    • положение (тела), поза ◆ Отсутствует пример употребления (см. рекомендации).
    • коитальная позиция ◆ Отсутствует пример употребления (см. рекомендации).
    • обычное, правильное место ◆ Отсутствует пример употребления (см. рекомендации).
  2. ситуация, позиция, положение; стечение обстоятельств ◆ Отсутствует пример употребления (см. рекомендации).
  3. возможность ◆ Отсутствует пример употребления (см. рекомендации).
  4. положение; должность ◆ Отсутствует пример употребления (см. рекомендации).
  5. отношение, точка зрения ◆ Отсутствует пример употребления (см. рекомендации).
  6. заявление, утверждение, принцип ◆ Отсутствует пример употребления (см. рекомендации).
  7. бирж. торговая позиция ◆ Отсутствует пример употребления (см. рекомендации).
  8. матем. место (цифры); разряд (числа) ◆ Отсутствует пример употребления (см. рекомендации).

Синонимы

  1. ?
  2. stand, disposition, posture
  3. ?
  4. ?
  5. condition
  6. ?
  7. rank, standing, status
  8. viewpoint, policy
  9. statement, assertion, tenet
  10. ?
  11. ?

Гипонимы

  1. ?
  2. kneeling position, lotus position, prone position, sitting position, squatting position, lying position, supine position; fetal position, defensive position
  3. missionary position
  4. ?
  5. ?
  6. ?
  7. ?
  8. ?
  9. ?
  10. ?
  11. ?

Совместимость с браузером

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check outand send us a pull request. Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 Замечания IE Полная поддержка 4 Opera Полная поддержка 4 Safari Полная поддержка 1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Замечания Opera Android Полная поддержка 14 Safari iOS Полная поддержка 1 Samsung Internet Android Полная поддержка 1.0
Absolutely-positioned flex children Chrome Полная поддержка 52 Edge Полная поддержка 12 Firefox Полная поддержка 52 IE Полная поддержка 10 Opera Полная поддержка 39 Safari Полная поддержка 11 WebView Android Полная поддержка 52 Chrome Android Полная поддержка 52 Firefox Android Полная поддержка 52 Opera Android Полная поддержка 41 Safari iOS Полная поддержка 11 Samsung Internet Android Полная поддержка 6.0
Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 Замечания IE Полная поддержка 7 Замечания Opera Полная поддержка 4 Safari Полная поддержка 1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Замечания Opera Android Полная поддержка 14 Safari iOS Полная поддержка 1 Samsung Internet Android Полная поддержка 1.0
Table elements as positioning containers Chrome Полная поддержка 56 Edge Полная поддержка 16 Firefox Полная поддержка 59 IE Нет поддержки Нет Opera Полная поддержка 43 Safari Полная поддержка 8 WebView Android Полная поддержка 56 Chrome Android Полная поддержка 56 Firefox Android Полная поддержка 59 Opera Android Полная поддержка 43 Safari iOS Полная поддержка 8 Samsung Internet Android Полная поддержка 6.0
Chrome Полная поддержка 56 Edge Полная поддержка 16 Firefox Полная поддержка 32 IE Нет поддержки Нет Opera Полная поддержка 43 Safari Полная поддержка 6.1 С префиксом WebView Android Полная поддержка 56 Chrome Android Полная поддержка 56 Firefox Android Полная поддержка 32 Opera Android Полная поддержка 43 Safari iOS Полная поддержка 6.1 С префиксом Samsung Internet Android Полная поддержка 6.0

Используемые значения

sPosition
Строка, которая может определять и принимать одно из следующих значений:
static
Значение по умолчанию. Для элемента не задано специальное позиционирование, он отображается как обычно в соответствии с разметкой документа.
absolute
Элемент относительно позиционирован по отношению к родительскому элементу, для которого тоже задано позиционирование. Если родительский элемент не позиционирован, то элемент позиционируется относительно объекта body, используя свойства left и top.
relative
Элемент позиционируется относительно его текущего местоположения. Положение элемента может регулироваться с помощью свойств left и top.
fixed
Используется в Internet Explorer 7.0 и старше. Элемент «привязывается» к определенной точке рабочей области с помощью свойств left, top, right и bottom и не меняет своего положения даже при пролистывании страницы.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является static. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Задание свойству position значения absolute автоматически встраивает элемент в web-документ, не учитывая расположение других элементов на странице. Если другие, ранее описанные элементы, уже находятся на определенных местах, то добавление нового элемента может вызвать их взаимное перекрытие. Такое перекрытие можно контролировать с помощью свойства z-index. У абсолютно позиционированных элементов нет отступов margin, но есть padding и border.

Чтобы определить элементу абсолютное позиционирование, надо помимо задания значения absolute для свойства position определить хотя бы одно из свойств top, bottom, left, или right. Иначе, этим свойствам будут заданы их значения по умолчанию, и элемент будет немедленно отображен на странице после предыдущего объекта в соответствии с правилами HTML.

Если элемент перекрыт другим объектом, причем даже если этот объект невидим, то его нельзя активировать, например, используя мышь. Тоже самое справедливо для позиционированных объектов с отрицательным значением z-index кроме:

родительским элементом является объект с прокручиваемым содержимым (это значит, что свойство overflow принимает значение auto или scroll).

родительским элементом является позиционированный объект (свойству position задано значение absolute или relative).

Задание свойству position значения relative встраивает элемент в web-документ, но с учетом расположения уже имеющихся в документе элементов. Следующий пример показывает как написать скрипт, чтобы текст, находящийся внутри <span> стал позиционирован относительно (relative) по отношению к предыдущему тексту параграфа.

<p>The superscript in this name 
    <span style="position: relative; 
    top: -3px">xyz</span> is "xyz".</p>

У каждого элемента, который позиционирон относительно имеется свое собственно место в web-документе, то есть он не перекрывает другие элементы как в случае с абсолютным позиционированием. Помещение абсолютно позиционированного элемента за областью видимости окна приводит в появлению полос прокрутки; если применяется относительное позиционирование, то полосы прокрутки не появляются.

Размер контента задает размер объекта и его размещение. Например, задание свойств position и height для объекта div определяет его размещение. В данном случае, размер контента влияет на размер width объекта div.

Internet Explorer 7.0 Значение fixed для позиционирования поддерживается только для страниц с объявленной директивой <!DOCTYPE>.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right


scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

CSS position: fixed

Свойство CSS position: fixed — фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.

Примера 4. HTML-код:

Код преобразуется в следующее:

В данном примере верхняя строчка с текстом «фиксированный текст» всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS.

Абсолютное позиционирование

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      img {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>

  <body>
	<img src="image.jpg">
	<p>Изменим расположение логотипа с помощью абсолютного позиционирования.<br> 
      Теперь логотип будет располагаться в правом верхнем углу страницы.</p>
  </body>
</html>

Попробовать »

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index


С этим читают