CSS - Position - Offset Properties (Left, Right, Top, Bottom)

About

The Offset CSS Properties of a box are

They are applied to the containing box in the following positioning model in order to position a box.

They are used then only when the box has one of the following position value:

  • relative
  • absolute
  • fixed.

Effect

Offset Moves the boxes to the … from the containing box
left right
right left
top bottom
bottom top

Example

Moving a word up

.up {
  position:relative;
  bottom:10px;
}
  • The HTML with a span element to apply the up class to words and will then offset them from 10px towards the top.
An example on how to move a words <span class="up">Up 10 pixels</span>
  • 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 ...
CSS - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...
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 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
CSS - Top Property

The top property is a offset property that specifies how far is positioned the box from the top edge of its . It applies only if the box itself has a position value of: relative absolute or fixed...



Share this page:
Follow us:
Task Runner