How to use positioning in CSS 3

ADMEC Multimedia > Web Design > How to use positioning in CSS 3

Understanding positioning is quite important as it is one of the most important features of CSS. Positioning helps us in organizing and setting the location of the HTML elements in a web page.

Positioning properties in CSS have 3 functions.

  • They allow you to position an element on the webpage.
  • For placing an element on top of or behind another element.
  • Define what happens when an element’s content is bigger than its size.

After the position property is set, you can use top, right, bottom, and left properties to position any of the element on the web page. These properties work differently depending on the positioning method.

Types of Positioning in CSS3

There are 4 different positioning methods: Static, Fixed, Relative, and Absolute.

Static Positioning

By default, HTML elements are positioned static. Static elements are positioned according to the normal flow of the page. They are not affected by the top, bottom, right, and left positioning properties.

Fixed Positioning

Fixed position always positioned an element relative to the browser window, according to the values set by the top, right, bottom, left properties – and will not move when the window is scrolled.

Fixed elements are removed from the normal flow. The webpage and other elements behave as if the fixed positioned element does not exist.

Fixed elements can overlap other HTML elements on the page, or be overlapped by others too.

Example:

div.logo {
   position: fixed;
   top: 10px;
   left: 15px;
}

Relative Positioning

An element that has relative position is positioned relative to its normal default position.

The content inside the relative elements can be moved and placed to overlap other elements, but the space allotted for the element is still preserved in the normal flow.

Relative positioned elements are often used as the container block (parent element) for absolute positioned elements.

Example:

h1.move-left {
   position: relative;
   left: -30px;
}

h1.move-right {
   position: relative;
   left: 50px;
}

Example:

div.move-up {
   position: relative;
   top: -40px;
}

Absolute Positioning

An absolute element is always positioned relative to the first parent element that has a positioning other than static. If no such parent element is there, the containing block is set as <html>.

Absolute elements are removed from the normal flow. The webpage and other elements behave as if the fixed positioned element does not exist.

Absolute elements can also overlap other HTML elements, or be overlapped by them also.

Example:

div.item-title {
   position: absolute;
   top: 200px;
   left: 170px;
}

Overlapping of Elements

When positioning of the elements are outside the normal flow (fixed, absolute or relative), they can overlap other elements, or be overlapped by them.

Overlapping elements can be considered stacked one on top of the other. Each element’s z-index property can be used to specify its stack order (which element should be placed on top of, or below, the others).

The z-index can have a positive or negative integer value.

An element with a greater z-index value is always on top of an element with a lower z-index value.

Example:

div.back-image {
   position: absolute;
   top: 10px;
   left: 20px;
   z-index: -2;
}

Note: If 2 positioned elements overlap without their z-index specified, the element placed later in the HTML code will be on top of the other.

CSS Position Properties

Position property in CSS specifies the type of positioning method used for an element – absolute | relative | fixed | static.

Default value:static. Normal document flow.
Inheritance:Not inherited by default.
Animation:Not animatable.
CSS Version:CSS2

Browser Support

The numbers denote the 1st version of the respective browser to fully support the position property.

BrowserChromeIEFirefoxSafariOpera
1st Version1.07.01.01.04.0

CSS Syntax

Position in CSS: static | absolute | fixed | relative | initial | inherit;

CSS positions and their description

ValueDescription
StaticDefault value.Order of the elements’ appearance is as per the document flow.
absoluteThe element is positioned with reference to its first positioned (not static) parent element. If no non-static positioned parent is there, the containing block is set as <html>.
FixedThe element is positioned relative to the browser window.
RelativeThe element is positioned relative to its normal position.Example: “left:10px;” adds 10px to the element’s Left position. “right:-30px;” reduce its normal Right position by 30px. Also this is used to define the parent element, whose child we want to position as absolute.
InitialSets this property to its default value. 
InheritInherits this property from its parent element. 

All CSS Positioning Properties

PropertyDescriptionValues
positionDefines the type of positioning for an elementabsolute
fixed
relative
static
inherit
topSets the top margin for a positioned boxauto
length
%

inherit
rightSets the right margin for a positioned boxauto
length
%

inherit
bottomSets the bottom margin for a positioned boxauto
length
%

inherit
leftSets the left margin for a positioned boxauto
length
%

inherit
z-indexSets the stacking order of an elementauto
number
inherit
clipClips an absolutely positioned elementauto
shape
inherit
overflowDefines what happens if content overflows an element’s boxauto
hidden
scroll
visible
inherit
cursorDefines the type of cursor to be displayedauto
url
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

Example:

A web page with a Fixed Header, and a Cover Picture area that collapse when Scrolling-up & re-appears when scrolling-down.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"/>
   <title>Fixed Header, Collapsing Cover, and Scroll-up Content</title>
   <link rel="stylesheet" type="text/css" href="positionexample.css"/>
</head>
<body>
   <div id="container">
        <header>
            <h1>This is the Header</h1>
        </header>
        <div id="cover-pic">
             <h2>This is Cover Picture area</h2>
        </div>
        <section>
             <p>here is all the content</p>
        </section>     
   </div>
</body>
</html>

CSS

html, body, div, header, h1, h2, section, p  {
   margin: 0;
   border: 0;
   padding: 0;
   outline: 0;
   box-sizing: border-box;
}

body {
   text-align: center;
}

#container {
   width: 990px;
   margin: 0 auto;
}

header {
   width: 990px;
   height: 100px;
   background-color: #ababab;
   position: fixed;
   z-index: 10;
}      

#cover-pic {
   width: 990px;
   height: 400px;
   border: 5px solid black;
   background-color: #ebebeb;
   position: fixed;
   top: 100px;
}         

section {
   width: 100%;
   height: 1500px;
   background-color: #707070;
   color: white;
   position: relative;
   top: 500px;
}

Summary

Positioning in CSS is vital to know for the better web page formatting. There are 4 types of positioning e.g. Fixed, Static, Absolute, and Relative while 4 types of positioning properties e.g. left, top, right, and bottom. Positions can only be apply after setting the positioning to get the desired effect.

About Writer

Writer of this post is Mr. Sebbe Kurean who is a student of website designing and UI development course in our institute. He is a very dedicated student and skilled graphic design professional too and working in a company in Delhi.

Leave a Reply

Related Posts

Copy link
Powered by Social Snap