CSS Position
In CSS, the Position attribute is often used, mainly absolute positioning and relative positioning. Simple use is no problem, especially when nested, it will be a bit confusing.
Position attribute: Specifies the positioning type of the element. That is, the elements are separated from the layout of the document flow and displayed anywhere on the page.
position attribute value:
absolute: Generate absolutely positioned elements, relative to the first element other than static positioning parent element for positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
relative: Generates relatively positioned elements, positioned relative to their normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
fixed: Generate absolutely positioned elements, positioned relative to the browser window.
static: Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
inherit: Specifies that the value of the position attribute should be inherited from the parent element.
The two most commonly used methods are absolute and relative.
position auxiliary attribute:
##①left: Indicates how many pixels to insert to the left of the element , how many pixels to move the element to the right. ②right: Indicates how many pixels to insert to the right of the element and how many pixels to move the element to the left. ③top: Indicates how many pixels to insert above the element and how many pixels to move the element downward. ④bottom: Indicates how many pixels to insert below the element and how many pixels to move the element upward. The value of the above attributes can be negative, unit: px.
##Absolute Absolute positioning
##Absolute positioning ;The layout breaks away from the document flow, and the remaining space is filled by subsequent elements. The starting position of positioning is the nearest parent element (postion is not static), otherwise it is the Body document itself.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Note:We found that due to the absolute positioning of Sub1, the position of Sub1 was offset, while the same level Div Sub2 occupied The position of Sub1, and Sub1 blocks Sub2.
#Relative Relative positioning
Relative positioning; does not break away from the layout of the document flow, Only changes its own position, leaving blank space in the original position of the document flow. The starting position of positioning is the original position of this element in the document flow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Note: We will find that Sub1 is offset, which does not affect the position of Sub2, and at the same time covers Sub2. Remember that the offset is not relative to the Div Parent, but Relative to the original position of Sub1.
Fixed Positioning
Fixed positioning; similar to absolute, but does not change position as the scroll bar moves.
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Note: You will find that Sub2 is always positioned with body.
