CSS Position


Position property in CSS is achieved to position element nicely in web pages.

    Positons in CSS

  • Static-This property makes element locatable in general way according to web page set up.Whether mention this or not element will be in same position.
  • Relative-Relative property is used to make element located to any position relative to the normal position of element.
  • Fixed-Fixed position fixes the element to the mentioned location.
  • Absolute-Absolute position fixes the element within other element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img.sta{
position: static;
border:2px solid black;
}
img.re{
position: relative;
left:50px;
border: 2px solid green;
}
img.fx{
position:fixed;
border:2px solid red;
}
</style>
<title>
CSS POSITION
</title>
</head>
<body>
<img class="sta" src=logo.jpg" alt="logo" style="width:200px;height:200px">
<img class="re" src=logo.jpg" alt="logo" style="width:200px;height:200px">
<img class="fx" src=logo.jpg" alt="logo" style="width:200px;height:200px">
</body>
</html>

Output:

1.In this output first image is static.
2.Second image is relative.
3.Third image is fixed.
Copy the above coding in notepad and change the position of third image to static then in output third image will become visible.
logo
logo
logo