To set the element at any position in browser we can use “position”
property. We have already studied background-property in “Background
properties”. This property sets the element at any given coordinates in the
browser. Along with “position” property use the properties “Top, left, bottom,
right ” and z-index. This property has following values:
o
static
This is the default value for this property. With this value element is not positioned but
appears in the flow of the element. The properties “top, left, bottom, right”
and z-index are ignored by the browser.
You need to set position to static only if you need override the
position set by previous element.
o
Relative
The position when set to relative
will move the element from the position where it would have appeared in the
normal flow of the document. With this property you can use the “top, left,
bottom, right” properties. If in your document a image appears in the header of
the page when position property is set to static and you change its position to
relative with “left:50px”, “top:10px” . Then the image would move left by 50px
and down by 10px.
o
Absolute
The element with property absolute
will be positioned considering the “top,
left” corner of the parent element
as origin. When the position:absolute is
set then rest of the document flow will not impact the position of the element.
Following is the simple example for the
position properties “static, relative,
absolute” . For relative elements is moved 10px top, 10px left and
absolute the elements is moved 10px top, 10px right.
Div 1
Div 2
No comments:
Post a Comment