Home > Article > Web Front-end > Understand the difference between relative and absolute in css position with one picture_html/css_WEB-ITnose
Understand the difference between relative and absolute in css position with one picture_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:431208browse
position has the following attributes: static, inherit, fixed, absolute, relative
The first three are easy to understand and distinguish:
static: It is the default state, no positioning, element Appears in normal flow (ignoring top, bottom, left, right or z-index declarations).
nherit: Inherits the value of the position attribute from the parent element.
fixed: Generates absolutely positioned elements, positioned relative to the browser window. (That is, when scrolling the browser, the element is always displayed at a certain position in the visible area of the window).
The two commonly used ones that may confuse beginners are absolute and relative. What is the difference between them?
1. Let’s first take a look at the concepts given by W3C
absolute: Generate absolutely positioned elements, relative to the first element other than static positioning parent element for positioning.
relative: Generates a relatively positioned element, positioned relative to its normal position.
The core difference between the two is : absolute is not affected by other elements in the parent element, while relative is affected by other elements in the parent element.
2. Understand the difference between absolute and relative with one picture
Code:
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style> html,body,div,p{ margin: 0; padding: 0;} #baba { position: absolute; left: 50px; top:50px; width: 300px; height: 300px; background: blue;} #baba p{ background:lightblue;} #erzi { position: absolute; left: 50px; top:50px; width: 200px; height: 200px; background: yellow;}</style></head><body id="body"><div id="baba"><p></p><div id="erzi"><p></p></div></div><script>var baba=document.getElementById("baba"), erzi=document.getElementById("erzi"); baba.children[0].innerHTML="我是"+baba.id; erzi.children[0].innerHTML="我是"+erzi.id; </script></body></html>