Parse the difference between relative and absolute in position of css-CSS Tutorial-php.cn

Parse the difference between relative and absolute in position of css

高洛峰

Release： 2017-03-28 17:27:10

Original

4241 people have browsed it

position has the following attributes: static, inherit, fixed, absolute, relative
The first three are easy to understand and distinguish:
static : is the default state, no positioning, the element appears in the normal flow (ignoring top, bottom, left, right or z-index statement).
nherit: Inherit the value of the position attribute from the parent element .
fixed: Generate 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).

Absolute and relative are more commonly used and may confuse beginners. What is the difference between them?

1. Let’s first look at the concept given by W3C

absolute: Generate an absolutely positioned element and position it relative to the first parent element other than static positioning.

relative: Generates relatively positioned elements, positioned relative to their normal position.

The core difference between the two is that 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

解析css的position里的relative和absolute的区别

Code:

<!DOCTYPE html>
<html>
<head>
<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>

Copy after login

The above is the detailed content of Parse the difference between relative and absolute in position of css. For more information, please follow other related articles on the PHP Chinese website!