Epson workforce pro wf-c869rdtwfsw (rips)

Relative position

El

ements with relative positioning, like static elements, remain in the normal document flow. When applying , , , or properties to relatively positioned elements, they will shift relative to their location, leaving an empty space where the element originally located.

Such elements do not affect the location of the elements surrounding them, the remaining elements remain in their places and can be blocked by a relatively positioned element:

Page title

Relatively positioned header.

Header of the third level.

Try it »

Note: elements with relative positioning are usually used as the parent for elements with absolute positioning.

Absolute position

Elements with absolute positioning are completely removed from the normal document flow, the remaining elements will occupy the space that has been freed, completely ignoring absolutely positioned elements. You can then position the element at any desired location on the web page using the , , , or properties.

All absolutely positioned elements are placed relative to the browser window or relative to the nearest positioned ancestor (if there is any), with the property set to , , or .


  Page title

Change the location of the image using absolute positioning.
Now the image will be located in the upper right corner of the page.

Try it »

Overlapping elements

When elements are out of the normal document flow, they can overlap each other. Usually, the order of the elements is in accordance with their order in the HTML code of the page, but it is possible to control the order of overlap with the CSS property, the larger its value, the higher the element will be.


  Page titlez-index: 1;
	z-index: 0;
	z-index: 2;
  

Try it »

position: sticky[Bearbeiten]

: Elemente mit dieser Eigenschaft behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben.

Empfehlung: Heben Sie bei kleinen Viewports wieder auf.

Beispiel

@media all and (max-width 35em) {
  #sticky {
    position static;
  }
}

Beachten Sie: Firefox, Chrome und Opera haben einen Bug, der es in Firefox verhindert Tabellenelemente zu fixieren. In Chrome und Opera beschränkt sich der Bug auf und .

CSS/Tutorials/Tabelle mit festem Kopf

Achtung!

Die Eigenschaft position: sticky ist derzeit (Stand: September 2019) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:

für Safari

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

实例

p.pos_fixed{position:fixed;
top:30px;
right:5px;
}

尝试一下 »

注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关,因此不占据空间。

Fixed定位的元素和其他元素重叠。

实例

h2.pos_left{position:relative;
left:-20px;
}h2.pos_right{position:relative;
left:20px;
}

尝试一下 »

移动相对定位元素,但它原本所占的空间不会改变。

实例

h2.pos_top{position:relative;
top:-50px;
}

尝试一下 »

相对定位元素经常被用来作为绝对定位元素的容器块。

实例

h2{position:absolute;
left:100px;
top:150px;
}

尝试一下 »

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit-
prefix (查看以下实例)。

实例

div.sticky{position: -webkit-sticky; position:sticky;
top:;
background-color:green;
border:2pxsolid#4CAF50;
}

尝试一下 »

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

实例

img{position:absolute;
left:px;
top:px;
z-index:-1;
}

尝试一下 »

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z — index,最后定位在HTML代码中的元素将被显示在最前面。

更多实例

此示例演示如何设置元素的外形。该元素被剪裁成这种形状,并显示出来。

这个例子演示了overflow属性创建一个滚动条,当一个元素的内容在指定的区域过大时如何设置以适应。

这个例子演示了如何设置浏览器来自动处理溢出。

这个例子演示了如何改变光标。

Absolute position

El

ements with absolute positioning are completely removed from the normal document flow, the remaining elements will occupy the space that has been freed, completely ignoring absolutely positioned elements. You can then position the element at any desired location on the web page using the , , , or properties.

All absolutely positioned elements are placed relative to the browser window or relative to the nearest positioned ancestor (if there is any), with the property set to , , or .

Page title

Change the location of the image using absolute positioning.
Now the image will be located in the upper right corner of the page.

Try it »

sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit-
prefix (查看以下实例)。

实例

div.sticky{position: -webkit-sticky; position:sticky;
top:;
background-color:green;
border:2pxsolid#4CAF50;
}

尝试一下 »

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

实例

img{position:absolute;
left:px;
top:px;
z-index:-1;
}

尝试一下 »

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z — index,最后定位在HTML代码中的元素将被显示在最前面。

更多实例

此示例演示如何设置元素的外形。该元素被剪裁成这种形状,并显示出来。

这个例子演示了overflow属性创建一个滚动条,当一个元素的内容在指定的区域过大时如何设置以适应。

这个例子演示了如何设置浏览器来自动处理溢出。

这个例子演示了如何改变光标。

position: sticky;

An element with is positioned based on the user’s scroll position.

A sticky element toggles between and , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit-
prefix (see example below). You must also specify at least one of , , or for
sticky positioning to work.

In this example, the sticky element sticks to the top of the page (), when you reach its scroll position.

Example

div.sticky {  position: -webkit-sticky; /* Safari */  position:
sticky;  top: 0;  background-color: green; 
border: 2px solid #4CAF50;}

position: relative[Bearbeiten]

Wie schon weiter oben erklärt, verwendet man als Bezugspunkt für absolut positionierte Kindelemente. Das Element an sich wird quasi «an sich selbst» ausgerichtet. Die Lücke im Textfluss bleibt bestehen. Trotzdem kann man das Element mit und ausrichten.

Beispiel
ansehen …

html>
  head>
    title>Fixe Positionierung eines Elementstitle>
    style>
	a { 
          position relative; 
          top -15px; 
          left -20px; 
        }
    style>
  head>
  body>
    h1 id="top">Überschrifth1>
    p>Lorem ipsum. Gaudeamus igitur, iuvenus dum sumus. Beati pauperes spiritu. 
      a href="http://example.com">Ein aus der Zeile geratener Link.a>
      Und weiter im Text.
    p>
  body>
html>

Как на самом деле работает position: sticky в CSS

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

«Липкий» элемент — это элемент, которому мы задали . Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например .

Пример:

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

«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.

Когда вы задаёте элементу , его родитель автоматически становится «липким» контейнером!Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера

В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.

Наглядный пример:

position: fixed[Bearbeiten]

Möchte man ein Element starr am Viewport ausrichten, (beispielsweise eine fixe Fußzeile oder einen Link zum Seitenanfang in einer Ecke) dann ist das Mittel der Wahl. Genau wie bei wird das Element aus dem Textfluss entnommen, es entsteht also keine Lücke. Positioniert wird klassisch mit den CSS-Eigenschaften und .

Beispiel
ansehen …

html>
  head>
    title>Fixe Positionierung eines Elementstitle>
    style>
      #toplink { 
        position fixed; 
        bottom ; 
        right ; 
      }
    style>
  head>
  body>
    h1 id="top">Überschrifth1>
    p>Lorem ipsum …p>

    p id="toplink">a href="#top">zum Seitenanfanga>p>

    p>Duis autem …p>
  body>
html>

Position

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на web-странице. Сейчас на данный момент это свойство поддерживает 5 значений: absolute, fixed, relative, static и sticky.

Relative

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

Absolute

Это абсолютное позиционирование. Когда мы указываем данное назначение, то мы даем понять, что элемент будет абсолютно позиционирован. При этом другие элементы отображаются на веб-странице так, словно этого абсолютного позиционирования на странице нет. Если у элемента стоит , то мы также можем управлять его местоположение при помощи каких свойств как: left, top, right и bottom.

Static

Это статичное позиционирование. В этом случае элементы отображаются, как обычно. Использование таких свойств как: left, top, right и bottom не приводит ни каким результатам.

Fixed

Это фиксированное позиционирование. В данном случае мы можем также управлять местоположением при помощи left, top, right и bottom, но при этом он свое положение на странице не будет менять в момент в скролл страницы.

Sticky

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

Стоит отметить, что свойство поддерживается браузерами уже довольно давно, но на тот момент поддерживалась только три свойства: static, relative и absolute и уже начиная с IE 7, появилась поддержка fixed. Но при этом относительно новое значение sticky не поддерживается Internet Explorer-ом совсем и относительная поддержка у Edge начинается только с шестнадцатой версии. Во всех остальных браузерах такое свойство, как position поддерживается без проблем.

All CSS Position Properties

property Description value
bottom It is used to set the bottom margin edge for a positioned box.. auto, length, %, inherit.
clip It is used to clip an absolutely positioned element. shape, auto, inherit.
cursor It is used to specify the type of cursors to be displayed. url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.
left It sets a left margin edge for a positioned box. auto, length, %, inherit.
right It is used to set a right margin edge for a positioned box. auto, length, %, inherit
.
overflow This property is used to define what happens if content overflow an element’s box. auto, hidden, scroll, visible, inherit
position It is used to specify the type of positioning for an element. absolute, fixed, relative, static, inherit
top It is used to set a top margin edge for a positioned box. auto, length, %, inherit
z-index It is used to set stack order of an element. number, auto, inherit

position: absolute[Bearbeiten]

Mit kann man Elemente losgelöst vom Textfluss positionieren, an eine Stelle, die per und festgelegt wird. Eine Lücke bleibt dabei nicht bestehen. Größenangaben, wie und , oder Abstände, wie und , sind ebenfalls möglich.

Beispiel
ansehen …

html>
  head>
    meta charset="utf-8">
    title>position:absolutetitle>
    style>
      main { 
        position relative; 
     }
      #info-box {
	border 3px dashed #F00;
	padding 10px;
        position absolute;
        right 1em;
        top ;
        width 250px;
     }
    style>
  head>
  body>
    h1>Verwendung von code>position:absolutecode>h1>
    main>
      p>Auf dieser Beispielseite möchten wir die Positionierung mit CSS zeigen. 
         In der rechten oberen Ecke des Dokuments wird eine grau umrahmte, absolut positionierte Box angezeigt.p>
      p>Lorem ipsum … p>
      div id="info-box">
        Dies könnte eine Info-Box sein, die einen Link, ein Bild oder ähnliches enthält. 
      div>
    main>
  body>
html>

Die Angaben und beziehen sich dabei auf das nächste Vorfahrenelement, welches mit positioniert wurde. Hat das Element keine solchen Vorfahrenelemente, wird als Bezugspunkt das Wurzelelement angesehen — in HTML-Dokumenten also das HTML-Element (bei XML wäre es das XML-Element). Im oberen Beispiel wird deshalb der Link mit der ID «info-box» relativ zum -Element positioniert, wofür das -Element die Eigenschaft erhält.

Möchte man eine Navigation bauen, in der sich die Untermenüs an der Hauptnavigation ausrichten, könnte man den Navigationspunkten der Hauptnavigation die Eigenschaft geben und hätte damit den Bezugspunkt für die jeweiligen Kind-Elemente geschaffen. Im Beispiel ist das einzige Kind-Element eine weitere Liste, die — dank absoluter Positionierung — aus dem Textfluss herausgenommen wird. Fährt man nun mit der Maus über einen Hauptlistenpunkt erscheint das Untermenü.

Beispiel
ansehen …

html>
  head>
    title>Positionierung mit CSStitle>
    style>
      body { 
        max-width 700px; 
        margin auto; 
      }
      nav, nav > ul { 
        width 100%; 
        margin ; 
        padding ;
      }
      nav > ul > li {
	position relative;
	display inline-block; 
        padding 10px;
	background-color #FEA;
	width 100px;
      }
      nav > ul > li > ul {
	position absolute;
	list-style-type none;
	margin ; 
        padding 10px;
	background-color #AEF;
	top 40px; 
        left ;
	width 100px;
        display none;
      }
      nav > ul > li:hover > ul { 
        display block; 
      }
    style>
  head>
  body>
    h1>Positionierung mit CSSh1>
    p>Auf dieser Beispielseite möchten wir die Positionierung mit CSS zeigen. In dem untenstehenden Menü sind die
     Untermenüs am Listenelement der Hauptnavigation ausgerichtet.p>
    nav>
      ul>
        li>Menüpunkt 1
          ul>
	    li>Sub 1.1li>
	    li>Sub 1.2li>
	    li>Sub 1.3li>
	    li>Sub 1.4li>
          ul>
        li>
        li>Menüpunkt 2
	  ul>
	    li>Sub 2.1li>
	    li>Sub 2.2li>
	    li>Sub 2.3li>
	    li>Sub 2.4li>
	  ul>
        li>
      ul>
    nav>
    p>Lorem ipsum …p>
  body>
html>

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Property Values

Value Description Play it
static Default value. Elements render in order, as they appear in the document flow Play it »
absolute The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed The element is positioned relative to the browser window Play it »
relative The element is positioned relative to its normal position, so «left:20px»
adds 20 pixels to the element’s LEFT position
Play it »
sticky The element is positioned based on the user’s scroll position

A sticky element toggles between and , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).

Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.

Try it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Значения свойства

Значение Описание
static Элемент находится в нормальном потоке и отображается на веб-странице в том месте, в котором он расположен в коде HTML-документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта.
absolute Элемент с абсолютным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. При прокрутке содержимого в окне браузера, элемент прокручивается с остальным содержимым веб-страницы.
fixed Элемент с фиксированным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно окна браузера. При прокрутке содержимого в окне браузера, элемент остаётся на месте, т. е. не прокручивается с остальным содержимым веб-страницы.
relative Элемент с относительным позиционированием остаётся в нормальном потоке. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его текущей позиции, однако, так как элемент находится в нормальном потоке, на его месте на веб-странице остаётся пустое пространство.
inherit: Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

position:

Результат:

myDIV

CSS Код:

div#myDIV { width: 100px; height: 100px; background: red; left: 10px; top: 100px; position: static; }

Кликните на любое значение свойства, чтобы увидеть результат

Not the answer you’re looking for? Browse other questions tagged html position html-table or ask your own question.

The Overflow Blog

How to develop a defensive plan for your open-source software project

Coming together as a community to connect

Featured on Meta

The Q1 2020 Community Roadmap is on the Blog

An Update On Creative Commons Licensing

Community and Moderator guidelines for escalating issues via new response…

Triage needs to be fixed urgently, and users need to be notified upon…

How does the Triage queue work?

Visit chat

Linked

2

IE11 table layout breaks when ancestor has display: flex

2

CSS dropdown menu Relative to a TD in a table

1

CSS Left and Top behaves differently in chrome, firefox and IE

CSS: Anchor In List Item Doesn’t Stay 100% Height

4

Div position issue in Firefox

3

Why absolute position is not right under Firefox 16.0.2

Displaying a loader in a table cell

Position a button relatively to the top of its parent node

3

How to fill DIV element into td parent?

1

Drag and drop not working in TD with Firefox

see more linked questions…

Hot Network Questions

  • KoTH: Highest HP is Eliminated!

  • Do Professors Get An Education «Allowance»?

  • If usbfs has been deprecated, then why is /sys/bus/usb/drivers/usbfs directory present?

  • COVID-19 — how do I navigate this situation with my advisor?

  • Why is Bxh6 not preferred here?

  • ShellCheck is carping that my expression is not in double quotes when it really is; why?

  • How to create well-aligned, clean structure to define a function (mathematics)?

  • Church-style CoC with axiom for induction over Church-encoded unit, is it consistent?

  • How did the authorities not find the speakeasy clubs during the prohibition?

  • Failed to pass parameter begin with #?

  • Is it safe to flush newspaper down the toilet?

  • When use setq or set ‘

  • Generating all hexominoes by cutting and pasting

  • How can we handle work-from-home requests from trainees/freshers in this coronavirus pandemic?

  • Andrew’s House Cleaning — A Word Ladder

  • Why would the offspring of a clone not suffer from a degenerative illness?

  • Required documents on arrival with person waiting outside, at arrival area. How can the documents be provided to the person arriving, at customs?

  • LaTeX code formatting regarding placement of floats and where best to place figures with respect to main body text references

  • Tense and conjugation: いないみたいでした v.s. いなかったみたいでした

  • Is there a spell that allows you to divine what happened «here»?

  • How can you build a model of tetrahedral coordination from objects found at home?

  • Commutator of finite global dimension algebras

  • How would you explain coronaVirus lockdown to a 4 years old?

  • Why is there no ruling to offset Mandatory Loops?

Question feed

Stack Overflow works best with JavaScript enabled

Остальные значения CSS position

4.1. Свойство position: static — этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

4.2. Свойство position: inherit — наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

Для обращения к position из JavaScript нужно писать следующую конструкцию:

  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете

Важно

  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь

2010-2020 — Zarabotat-Na-Sajte.ru

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

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

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

Пример:

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

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

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

CSS position: relative

Свойство position: relative — относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:

  • top
  • bottom
  • left
  • right

Если не указано никаких смещений, т.е.

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

Для пояснения этой особенности приведем пример.

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

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

Примера 2*. Добавим к первому диву: position: relative;. HTML-код:

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

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

Normal document flow

By default, the elements on the web page are displayed in the order in which they appear in the HTML document, that is, the block elements occupy the entire width available for them and are stacked vertically one under the other. The inline elements are aligned horizontally until all available width is occupied, after the entire width is occupied, the line will be shifted and everything will follow the new one. This ordering of elements is called a normal document flow.

Using the or property, you can remove an element from the normal document flow. If the element drops out from the normal document flow, then the elements that are located in the code below this element will be moved to its place on the web page.

Ссылка на основную публикацию