• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Css » Tutorial » CSS position property
Next →
← Prev

CSS position property

By Dinesh Thakur

Positioning properties enhance the flexibility, and make CSS a very powerful presentation language. They are used to position elements in a webpage. By default, elements are positioned in a normal flow i.e. block level elements such as <p>, <h1> will be laid from top to bottom and inline elements such as <b>, <1> will be laid from left to right.

However, you can also place the various elements at desired positions in a browser window or at the top of others using these properties.

We’ll be covering the following topics in this tutorial:

  • CSS Position
  • CSS Z-Index
  •  CSS Float
  • CSS Clear
  • CSS Overflow

CSS Position

The POSITION property is used to position various elements at the desired place in the webpage. The various values that can be assigned to it are

Value       Meaning
Static(default)
Sets the position according to the normal flow.
RelativePositions the element in normal flow and offset it by some amount using the box offset properties. It may result in overlapping with other elements that are also positioned on the page.
AbsoluteTakes the element out of normal flow and positions it at a specific place with respect to top left border of the parent element whose position property is relative or fixed. If parent element is nbt present, it positions according to browser window.
Fixed
Same as absolute except the element is positioned with respect to the browser window, Moreover, element with fixed value will not scroll with a webpage. IE6 does not.supports it.

When positioning element with relative, absolute or fixed values, the box offset properties are used to offset the element. These properties are TOP, LEFT, RIGHT, BOTTOM. Each can take a value of length, percentage or Auto. Let us consider an example,

<html>  
 <head>  
  <title> Position properties </title>  
   <style>  
   p{  background-color : yellow;  width : 1OOpx;  border :2px solid black;  position : relative;  }  
   b{width: lOOpx;  background-color: cyan;  position: absolute;  top:20px;  left:30px;  }  
  </style> 
 </head>  
<body>  
<p>Here is a paragraph on which relative positioning is verified.  
<b>It is very important part of css</b>  We should check the same with other values of position property,  </p>  
</body>  
</html>

If both the left and right properties are specified, the width of the element is implied. If top and bottom properties are provided then height of element is implied.

CSS Z-Index

The Z-index property is used to specify how absolutely positioned element boxes stack on the top of each other when they overlap. Z-index accepts an integer value in the range 0 to 32767. Elements with higher Z-index property will display in front of those with lower Z-index property value. If both have the same value then the one that appears first in the code is displayed on the top.

By default, value of Z-index is auto which means that every subsequent element has higher index value than the one before. It is very useful when you want to drop a shadow behind the text. Let us now consider an example to explain Z-index property.

<html> 
<head>  
<title>Z index property</title>  
<style type="text/css"> 
 p{background-color : yellow;  width : 1OOpx;  z-index:2;  position: absolute;  } 
 b{width:1OOpx;  position: absolute;  left:80px;  background-color: cyan;  
</style>  
</head>  
<body>  
<p>it is raining heavily outside so take your umbrella along with you </p>  <b> But I am going by car</b>  </body>  
</html>

 CSS Float

The FLOAT property allows you to set an element to the left or right margin in such a way that the other contents wraps around it. It is ideal for situations when you want to put the content side by side. The possible values that this property can hold are none, left and right.

Float property is ignored when you set the position property to either absolute or fixed For example:

<html>  
<head>  
<title> Float properties </title>  
<style type="text/css > 
 p{background-color : yellow ;  float: right;  }  
b{background-color: red;}  
</style>  
</head>  
<body>  
<h1>Floating properties </h1>  
<hr>  <p>i am the best boy </p>  
<b>i am an intelligent girl </b>  
</body>  
</html>

CSS Clear

The CLEAR property is used in relation with float property. It controls the floating contents in such a way that the contents do not wrap around it instead it pushes them under the float element. The values it can have are Left, Right, both and none.

If clear is set to left then element contents will be cleared from the left side of the floating contents. Similarly in case of others. Let us consider an example,

<html> 
 <head>  
<title> Clear properties </title>  
<style type="text/css >  
p{background-color : yellow ;  float: right;  }  
b{background-color: cyan;  clear:right;  } 
 </style>  
</head>  
<body>  
<hl >Clear properties </h1 >  
<hr>  <p>i am the best boy </ p> 
 <b> i am an intelligent girl </b>  
</body>  
</html>

CSS Overflow

The OVERFLOW property is used when the element’s content are larger enough than the space (i.e. height and width) allocated to it. Using this property, the overflowing contents of the element would either be hidden, scrolled or visible. This is made possible by assigning values such as visible (default), hidden, scroll and auto to it. For example:

P{overflow : auto;  Width : 100px;  Height : 50px;}

You’ll also like:

  1. CSS margin property
  2. CSS font property
  3. CSS padding property
  4. CSS background property
  5. CSS border-style property
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

CSS Tutorials

CSS Tutorials

  • CSS - Font Property
  • CSS - Background Property
  • CSS - CSS - Border-Style Property
  • CSS - Text-Decoration Property
  • CSS - Tables
  • CSS - Position
  • CSS - Syntax and Selectors
  • CSS - List
  • CSS - Margin
  • CSS - Padding

Other Links

  • CSS Tutorials - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2025. All Rights Reserved.

APPLY FOR ONLINE JOB IN BIGGEST CRYPTO COMPANIES
APPLY NOW