Position Property CSS

Absolute Position in HTML and CSS

<html>
<head>
<style>
div.relative {
    position: relative;
    width: 500px;
    height: 200px;
    border: 5px solid brown;
} 
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 300px;
    height: 100px;
    border: 3px solid red;
}
</style>
</head>
<body>
<h2>Position: absolute;</h2>
<p><b>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</b></p>
<div class="relative">
<img src="logo.jpg"/>

  <div class="absolute">
<img src="logo.jpg"/>
</div>
</div>
</body>
</html>

<html>

<head>

<style>

div.relative {

position: relative;

width: 500px;

height: 200px;

border: 5px solid brown;

}

div.absolute {

position: absolute;

top: 80px;

right: 0;

width: 300px;

height: 100px;

border: 3px solid red;

}

</style>

</head>

<body>

<h2>Position: absolute;</h2>

<p><b>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</b></p>

</div>

</body>

</html>

Relative Position in HTML and CSS

<html>
<head>
<style>

div.r {
    position: relative;
    left: 60px;
    border: 5px solid green;
}

h1, p 
{
    text-align: center;
    color: purple;
}

</style>
</head>
<body>

<h1>Position: relative</h1>

<p><b>An element with position: relative; is positioned relative to its normal position:</b></p>

<div class="r">
This div element has Position: relative;
</div>

<br>
<img src="logo.jpg"/>

</body>
</html>

<html>

<head>

<style>

div.r {

position: relative;

left: 60px;

border: 5px solid green;

}

h1, p

{

text-align: center;

color: purple;

}

</style>

</head>

<body>

<h1>Position: relative</h1>

<p><b>An element with position: relative; is positioned relative to its normal position:</b></p>

This div element has Position: relative;

</div>

<br>

</body>

</html>

Fixed Position in HTML and CSS

<html>
<head>
<style>

div.fixed {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 300px;
    border: 3px solid green;
}

</style>
</head>
<body>

<h2>Position: fixed</h2>

<p><b>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</b></p>

<div class="fixed">
<img src="logo.jpg"/>
</div>

</body>
</html>

<html>

<head>

<style>

div.fixed {

position: fixed;

bottom: 50px;

right: 50px;

width: 300px;

border: 3px solid green;

}

</style>

</head>

<body>

<h2>Position: fixed</h2>

<p><b>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</b></p>

</div>

</body>

</html>

Static Position in HTML and CSS

<html>
<head>
<style>

div.static {
    position: static;
    width: 250px;
    border: 5px solid blue;
}

h1,  h2
{
     text-align: center;
     color: blue;
}

</style>
</head>
<body>

<h1>Welocme To CSS</h1>

<h2>Psoition: static</h2>

<div class="static">
This div element has position: static;
</div>

<br>
<img src="logo.jpg"/>

</body>
</html>

<html>

<head>

<style>

div.static {

position: static;

width: 250px;

border: 5px solid blue;

}

h1, h2

{

text-align: center;

color: blue;

}

</style>

</head>

<body>

<h1>Welocme To CSS</h1>

<h2>Psoition: static</h2>

This div element has position: static;

</div>

<br>

</body>

</html>

Sticky Position in HTML and CSS

<html>
<head>
<style>

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: lightpink;
  border: 4px solid red;
}

</style>
</head>
<body>

<h1>Position: sticky</h1>

<p><b>"Try to scroll" inside this frame to understand how sticky positioning works"...</b></p>

<div class="sticky">Sticky</div>

<div style="padding-bottom:3000px">

  <p>Scroll back up to remove the stickyness.</p>

  <p>Some text to enable scrolling.. For Example: The Central Superior Services (denoted as CSS; or Bureaucracy) is a permanent elite bureaucratic authority, and the civil service that is responsible for running the civilian bureaucratic operations and government secretariats and directorates of the Cabinet of Pakistan...</p>

<img src="logo.jpg"/>

</div>

</body>
</html>

<html>

<head>

<style>

div.sticky {

position: -webkit-sticky;

position: sticky;

top: 0;

padding: 5px;

background-color: lightpink;

border: 4px solid red;

}

</style>

</head>

<body>

<h1>Position: sticky</h1>

<p><b>"Try to scroll" inside this frame to understand how sticky positioning works"...</b></p>

<div class="sticky">Sticky</div>

<p>Scroll back up to remove the stickyness.</p>

<p>Some text to enable scrolling.. For Example: The Central Superior Services (denoted as CSS; or Bureaucracy) is a permanent elite bureaucratic authority, and the civil service that is responsible for running the civilian bureaucratic operations and government secretariats and directorates of the Cabinet of Pakistan...</p>

</div>

</body>

</html>

Bottom – Right in HTML and CSS

<html>
<head>
<style>
.container {
    position: relative;
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Bottom Right</h2>

<p><b>Add some text to an image in the bottom right corner:</b></p>

<div class="container">
  <img src="logo.jpg" alt="logo" width="1500" height="300">
  <div class="bottomright">T4-Tutorials</div>
</div>

</body>
</html>

<html>

<head>

<style>

.container {

position: relative;

}

.bottomright {

position: absolute;

bottom: 8px;

right: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Bottom Right</h2>

<p><b>Add some text to an image in the bottom right corner:</b></p>

<div class="bottomright">T4-Tutorials</div>

</div>

</body>

</html>

Bottom Position in HTML and CSS

<html>
<head>
<style>
.container {
    position: relative;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.2;
}
</style>
</head>
<body>

<h2>Bottom Left</h2>

<p><b>Add some text to an image in the bottom left corner:</b></p>

<div class="container">
  <img src="logo.jpg" alt="logo" width="1000" height="300">
  <div class="bottomleft">T4-Tutorials</div>
</div>

</body>
</html>

<html>

<head>

<style>

.container {

position: relative;

}

.bottomleft {

position: absolute;

bottom: 8px;

left: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.2;

}

</style>

</head>

<body>

<h2>Bottom Left</h2>

<p><b>Add some text to an image in the bottom left corner:</b></p>

<div class="bottomleft">T4-Tutorials</div>

</div>

</body>

</html>

Center Position in HTML and CSS

<html>
<head>
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.4;
}
</style>
</head>
<body>

<h2>Welcome To CSS</h2>
<p><b>Center text in image:</b></p>

<div class="container">
  <img src="logo.jpg" alt="logo" width="1000" height="300">
  <div class="center">T4-Tutorials</div>
</div>

</body>
</html>

<html>

<head>

<style>

.container {

position: relative;

}

.center {

position: absolute;

left: 0;

top: 50%;

width: 100%;

text-align: center;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.4;

}

</style>

</head>

<body>

<h2>Welcome To CSS</h2>

<p><b>Center text in image:</b></p>

<div class="center">T4-Tutorials</div>

</div>

</body>

</html>

Image Position in HTML and CSS

<html>
<head>
<style>

.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.5;
}

</style>
</head>
<body>

<h2>Image in the Top left corner:</h2>

<p><b>How to position text over an image:</b></p>

<div class="container">
  <img src="logo.jpg" alt="logo" width="2000" height="400">
  <div class="topleft">T4-Tutorials</div>
</div>

</body>
</html>

<html>

<head>

<style>

.container {

position: relative;

}

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.5;

}

</style>

</head>

<body>

<h2>Image in the Top left corner:</h2>

<p><b>How to position text over an image:</b></p>

<div class="topleft">T4-Tutorials</div>

</div>

</body>

</html>

Overlapping Position in HTML and CSS

<html>
<head>
<style>

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

</style>
</head>
<body>

<h1>Overlapping</h1>

<img src="logo.jpg" width="400" height="100">

<br><br>
<p><b>Because the image has a z-index of -1, it will be placed behind the text..</b></p>

</body>
</html>

<html>

<head>

<style>

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

</style>

</head>

<body>

<h1>Overlapping</h1>

<p><b>Because the image has a z-index of -1, it will be placed behind the text..</b></p>

</body>

</html>

Right Position in HTML and CSS

<html>
<head>
<style>

.container {
    position: relative;
}

.topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}

</style>
</head>
<body>

<h2>Top-Right</h2>

<p>How to position text over an image:</p>

<div class="container">
  <img src="logo.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">T4-tutorials</div>
</div>

</body>
</html>

<html>

<head>

<style>

.container {

position: relative;

}

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Top-Right</h2>

<p>How to position text over an image:</p>

<div class="topright">T4-tutorials</div>

</div>

</body>

</html>

Position Property CSS
By: Prof. Dr. Fazal Rehman | Last updated: April 23, 2020