CSS – T4Tutorials.com

Position Property CSS

April 23, 2020 by Prof. Dr. Fazal Rehman

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 … Read more