How to use positioning in CSS 3

ADMEC Multimedia Institute > 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 .If you use this property along with flex you can get the most out of it.

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 5 different positioning values but only one is active for an element at a time you can’t use two position properties at once.

  • position:static;
  • position:relative;
  • position:fixed;
  • position:absolute;
  • position:sticky;

position:static;

It is the default value of all the elements in HTML and this is the only property value that does not work with top, right, bottom ,and left properties. The element with static positioning retains its original place in the web page hierarchy.

position:fixed;

As the name suggests if you want an element to never change its position even if the page is scrolled then use this property. The element is placed with use of other 4 property i.e., top, right, bottom, and left.

Example:

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

position:relative;

It is the one of the most used values but remember its usage is a bit tricky and using this property value to relocate any element is not advised. Reason is pretty simple: if you move the element using it, this will cause the element to leave the blank space to the point of the new positioning value and filling the space is not possible.

This property works best with a parent child relationship. We’ll see how in a bit

Example:

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

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

Example:

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

position:absolute;

The most commonly used positioning property with relation to the parent element having position:relative; property. First thing if position relative is not given to any parent element then the document body becomes the parent.

The element with the property can be placed anywhere inside that element by using the same four properties to place but using display:flex; to align or place the element is better since you don’t have to worry about the responsive part. 

Example:

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

position:sticky;

This property is used for making the element fixed only when the page is scrolled to a particular offset. This positioning property is used for making navigation fixed at the top when it also has a top bar above it.

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.

Related Posts

Leave a Reply

Call Now