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

Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.



More Tutorials:   SQL   PHP   HTML


Copyright 2007-2009   1keydata.com   All Rights Reserved.   Privacy Policy  



CSS Tutorial
CSS Syntax
Apply CSS
CSS Media Types
CSS Cascade
CSS Inheritance
CSS Class ID
CSS Div Span
CSS Length Units

CSS Box Model
CSS Margin
CSS Border
CSS Padding
CSS Background
  CSS Background-attachment
  CSS Background-color
  CSS Background-image
  CSS Background-position
  CSS Background-repeat
CSS Color
CSS Font
CSS Link
CSS List
CSS Table
CSS Position
  CSS Absolute
  CSS Relative
  CSS Fixed
  CSS Static
  CSS Top
  CSS Bottom
  CSS Left
  CSS Right
  CSS Overflow
  CSS Z-Index
CSS Text
CSS Float
CSS Clear
CSS Cursor
CSS Wrap

CSS Codes

Resources

CSS Tutorial German