ankitweblogic logo
W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

Types of CSS

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

Display, Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS2 Position property

The CSS position properties helps you to position your HTML element. You can put any HTML element at whatever location you like. It can also place an element behind another.

There are five different position values:
1. static
2. relative
3. fixed
4. absolute
5. sticky

Static Position

HTML elements are positioned static by default. Static positioned elements are not affected by the left, right, top and bottom properties.

Relative Position

position: relative helps an element to change its position from original to new position, using left, right, top and bottom properties. The element will be positioned according to the parent element.

Example: Change the HTML element's position using relative and top properties.

HTML:-
<div class="div1">
  Some text in parent div
    <div class="div2">
      Child div moved left 100px and top 100px.
    </div>
</div>

CSS:-
.div2{
  position: relative;
  left: 100px;
  top: 100px;
}

Absolute Position

An HTML element with absolute position will move according to html body. However, if you want to positioned according to its parent, than specify position relative in the parent element.

Example:

Fixed Positioning
An element with a fixed position, will not move even if the window is scrolled.
Example:

CSS2 z-index property

The z-index property specifies the order of an element. An element with greater order is always in front of an element with a lower order.
Note: z-index only works on position:absolute, relative, or fixed.
Example:

Example: