CSS Position - Relative Positioning (Static > Relative)

About

relative 1) is a positioning scheme that positions a box:

.

The offset properties are calculated with respect to the edges of the positioned box in the normal flow.

Example

In this example, we create two boxes:

  • one normally positioned (ie normal flow static positioning)
  • and one relatively positioned

to show the difference.

  • First, the box in the normal flow
<div class="box">
text
    <p class="child-box">Box in the normal flow without offset</p>
    text
</div>
  • Then a box relatively positioned
<b>versus</b>
<div class="box">
text
    <p class="child-box-offset child-box">Relative Box positioning with a bottom offset that moves the box up with 10px</p>
    text
</div>
  • Then we create the style for the relatively positioned box. We use here only bottom. 10px moves up from the bottom of normal positioned box.
.child-box-offset {
    position:relative;
    bottom:10px;
}
  • We add a border to the child boxes to visually show the placement
.child-box {
    border: 2px solid red;
    margin: 0px;
}
.box {
    border: 2px solid steelblue;
    width:350px;
    position: static /* The default (normal flow, not needed, just for info) */
}
  • The result:





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: * from the first ascending box...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
CSS - Right Property

The right property is the offset from the right edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticrightnormal flow positioning model ...
CSS - Sticky positioning (Pinning)

Sticky is a positioning option that: keeps the box in view (ie in the viewport)) within its containing block as the user scrolls. From a logical point of view, the element is treated: first...
CSS - The containing box

The containing box is a box that is used in the positioning of element on the page



Share this page:
Follow us:
Task Runner