HTML Absolute Position and Other Positions
Positioning elements in HTML can be complicated. There’s static positioning, fixed positioning, relative positioning, absolute positioning, and overlapping elements. Each type of positioning is detailed below with examples on how to position your elements in that way. However, before you can use any of the positioning properties, you have to understand the pieces you need for using the positioning properties. Learn the basics of HTML with an online class.
What You Need to Use Positioning Properties
HTML doesn’t actually have specific coding for positioning properties. You could try using the style tags with it, but it’s simpler to use CSS instead. Each position will include coding examples to help you better understand how to position your elements. These coding examples will include the CSS coding and the HTML coding. Learn beginning HTML with an online course.
The Different Positioning Properties
There are a number of different positions that can be used with the positioning properties. There’s static, fixed, relative, and absolute. You can use these positions to also overlap elements. Each positioning property is detailed below with coding examples that you can use for your own webpages. Learn HTML and CSS for beginners with an online class.
Static Positioning
Coding is not given for static positioning because static is the default position for elements on a webpage. The position of static elements is based on the page’s flow. An example of shapes following static position is below. 
These elements have not had their position modified. They are lined up relative to the flow of the web page. If you’re interested in adding shapes to your own web page, like the shapes above, you can learn how with this article on CSS3 shapes.
Fixed Positioning
This particular type of positioning is relative to the browser window, not the flow of the page. Even when scrolling, items that have been placed in fixed positioning will not move. Here is a coding example for creating fixed position elements. First, start with your CSS code:
#circle { width: 200px; height: 200px; background: green; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position:fixed; }
#roundedcornersquare { width: 200px; height: 200px; background: green; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
#square { width: 250px; height: 250px; background: purple; }
#rectangle { width: 200px; height: 100px; background: orange; }
This code includes all of the elements that are showing in the example images below. However, before you can view the shapes you have just created, you’re going to need to create the web page with HTML. Here’s the example HTML coding you would use for this particular CSS.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS3 Testing</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”> </head>
<body>
<h1>New Web Project Page</h1> <div id=”circle”></div> <div id=”roundedcornersquare”></div> <div id=”square”></div> <div id=”rectangle”></div>
</body>
</html>
Again, the HTML includes only the shapes that show in the images below.
Note that the circle is just peeking out over the rounded square
The circle is now floating over the square and orange rectangle
Notice in the first picture, the circle from the image showing static positioning has managed to merge with the rounded square. The second image shows the circle hovering over the purple square because, again, its position is fixed. No matter how much you scroll, that circle will scroll all the way down the browser window and back up with you.
Relative Positioning
Elements in relative positioning are in a position that is relative to the original, static position. To change the position, you use the top, bottom, left, and right properties. Relative positioning allows you to move elements around on your webpage, and elements can also be overlapped with this method. Reserved space for the element is still preserved in the normal flow. Here is the CSS coding for relative positioning:
#up-triangle { width: 0; height: 0; border-bottom: 100px solid blue; border-left: 60px solid transparent; border-right: 60px solid transparent; position:relative; left: 60px; }
#down-triangle { width: 0; height: 0; border-top: 100px solid yellow; border-left: 60px solid transparent; border-right: 60px solid transparent; }
#right-triangle { width: 0; height: 0; border-left: 100px solid red; border-top: 60px solid transparent; border-bottom: 60px solid transparent; }
#left-triangle { width: 0; height: 0; border-right: 100px solid pink; border-top: 60px solid transparent; border-bottom: 60px solid transparent; }
Using the CSS coding, you can now create your HTML coding. It will look similar to the HTML coding above.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS3 Testing</title> <link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
</head>
<body>
<h1>New Web Project Page</h1> <div id=”up-triangle”></div> <div id=”down-triangle”></div> <div id=”right-triangle”></div> <div id=”left-triangle”></div>
</body>
</html>
If you’ve coded your web page correctly, it should look something similar to the image below. 
As you can see the top triangle, #up-triangle, is quite farther away from the margin compared to the other triangles. Learn HTML5 with an online course.
Absolute Positioning
The position of elements in absolute position is relative to parent elements that don’t have a static position. Elements in absolute position that are the first element on the page are contained within the <html> tags. This will allow you to move elements wherever on your web page. The CSS coding example is below.
#up-triangle { width: 0; height: 0; border-bottom: 100px solid blue; border-left: 60px solid transparent; border-right: 60px solid transparent; position:relative; left:100px; top:400px; }
#facebook-icon { background: blue; text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid blue; border-bottom: 0; } #facebook-icon::before { content: “/20”; position: absolute; background: blue; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid #eee; border-radius: 25px; } #facebook-icon::after { content: “/20”; position: absolute; width: 55px; top: 50px; height: 20px; background: #eee; right: 5px; }
The same blue triangle from the previous example is now being moved to a new location on the web page. Here is the HTML for the new web page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS3 Testing</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
</head>
<body>
<h1>New Web Project Page</h1> <div id=”up-triangle”></div> <div id=”facebook-icon”></div>
</body>
</html>
The triangle is no longer just a little away from the left margin. It is now floating on the web page. 
As you can see, its position changed to be underneath the Facebook icon even though it was listed first in the HTML coding.
Overlapping Elements
Using the position properties above, you can easily make elements overlap. This involves a new property called the z-index. Using this property allows you to define the stacking order. Using the same shapes from before, the CSS coding is below.
#up-triangle { width: 0; height: 0; border-bottom: 100px solid orange; border-left: 60px solid transparent; border-right: 60px solid transparent; position:relative; left:100px; top:150px; z-index:-1; }
#facebook-icon { background: blue; text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid blue; border-bottom: 0; } #facebook-icon::before { content: “/20”; position: absolute; background: blue; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid #eee; border-radius: 25px; } #facebook-icon::after { content: “/20”; position: absolute; width: 55px; top: 50px; height: 20px; background: #eee; right: 5px; }
The HTML coding follows.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS3 Testing</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
</head>
<body>
<h1>New Web Project Page</h1> <div id=”up-triangle”></div> <div id=”facebook-icon”></div>
</body>
</html>
Here is what your web page will look like using this coding: 
Using the z-index property, you can easily bring the triangle in front of the Facebook icon instead using a positive stack order as opposed to the negative stack order in the example.
Finale Note
Playing with the position of your elements can be fun, but be sure you do it in a way that their position doesn’t distract from your web page. A large green circle in fixed position like in the example above would cover up words or images on your web page and probably annoy your visitor. However, using z-index you can easily make it so that any elements in fixed position are actually part of the background instead of covering up your text and graphics. Have fun playing around with the different positions, and enjoy making your website look even better.
Recommended Articles
HTML Interview Questions And Answers
HTML to WordPress Theme: The Definitive Guide
HTML5 vs Flash: Which Standard Will Prevail?
Top courses in HTML
HTML students also learn
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.