CSS Relative



CSS Tutorial  >  Position  >  Relative

The relative value of the position property specifies how the element will be positions relative to how it would have been positioned by default. It is used in combination with a direction (top, bottom, left, and right). Let's view an example of relative position in action:

CSS Code

div {
  background-color:#FF00FF;
  width:250px;
  height:60px;
}

p {
}
 
 

The HTML code,

<div>
  <p>Example to show relative position.
</div>

renders

Example to show relative position.

div {
  background-color:#FF00FF;
  width:250px;
  height:60px;
}

p {
  position:relative;
  top:15px;
}

 

<div>
  <p>Example to show relative position.
</div>

 

Example to show relative position.

In the above example, applying the {position:relative; top:15px;} style added 15px of space on top of the text. In other words, this style shifted the text down by 15px relative to the default position.

Next: CSS Fixed




Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.