Discuss the difference between relative and absolute positioning

Discuss the difference between relative and absolute positioning


Answer:

Relative Positioning

This positioning is relative to other positioning or itself.

When we set the top, right, bottom, and left properties of a relatively-positioning element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any remaining space/gap left by the element.

Example:

div.relative {
  position: relative;
  left: 20px;
  border: 2px solid #73AD22;
}

Absolute Positioning

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of place relative to the viewport, like fixed
If an absolute located element has no placed ancestors, it makes use of the record and moves collectively with web page scrolling.

Note: A "positioned" element is one whose function is anything except static.

Example

div.absolute {
  position: absolute;
  top: 60px;
  right: 0;
  width: 150px;
  height: 80px;
  border: 2px solid #73AD22;
}
Other Question With Answer


















No comments:

For Query and doubts!

Powered by Blogger.