With regard to the setting of the Position property, the mind has always felt that it is not very clear, so take this opportunity to test it alone, as a learning note. First, the Position property of CSS contains the following four settings:
- Static: The default property. Specifies that the element is positioned according to the normal document content Liu (left to right, top to bottom).
- Absolute: Independent positioning, which is positioned either relative to the nearest positioned ancestor element, or relative to the document itself.
- Fixed: This value specifies that the element is positioned relative to the browser window. does not scroll with other parts of the document.
- Relative: An element is laid out according to a regular document flow, and its positioning is adjusted relative to the position in the document flow.
Above is the definition, the following begins my test: Demo code: <! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
*{
margin:0;
padding:0;
}
#father {
width:300px;
height:300px; Background:black; }
#child1 {
width:100px;
height:100px; Background:blue; }
#child2 {
width:100px;
height:100px;
Background:yellow;
}
#cousin {
width:100px;
height:100px; Background:green; }
</style>
<body>
<div id= "Father" >
<div id= "Child1" >child1</div>
<div id= "Child2" >child2</div>
</div>
<div id= "Cousin" >cousin</div>
</body>
width:300px;
height:300px;
Background:black;
position:fixed;
top:100px;
left:100px;} To show the browser scrolling situation, the element position does not move relative to the browser window, setting cousin to #cousin{
width:100px;
height:2000px; Background:green;} Effect: Scroll the scrollbar, father the position of the element Case2: Next the main distinction between relative and absolute the situation before deleting the settings, reset the CHILD1 elements as follows #child1{
width:100px;
height:100px;
Background:blue;
position:relative;
top:100px;
left:100px;} Prediction Effect: The element is not out of the document flow, but deviates from its original position because only the position of such an element is set, so the deviation should be relative to the document. Effect: (as expected, only child1 deviated from the original position, haha haha) good, now on the basis of the above, modify the father elements of the position, into relative#father{
width:300px;
height:300px;
Background:black;
position:relative;
top:100px;
left:100px;
The prediction effect: the entire father element deviates from the original position, the child1 and child2 elements are not changed in relation to the father, and the cousin position is also unchanged. Effect: (as expected, the thief haha haha) then, the key to, look at the difference between absolute and relative, the above Father element position modified to absolute#father{
width:300px;
height:300px;
Background:black;
Position:absolute;
top:100px;
left:100px;} Prediction effect: Absolute because it will leave the element out of the original position, so the following elements will top up, which is a bit like floating, but in fact we can control its specific position, so a bit stronger than the float. Effect: (as expected, yes roar roar) at this time, we then set the cousin properties, will he also absolute up, see it is relative to who to set the position #cousin{
width:100px;
height:100px;
Background:green;
Position:absolute;
top:100px;
left:100px;} Prediction effect: Because cousin does not have a parent element, it should be absolutely positioned according to the document, and father does not matter: (as expected, I really admire myself) we will cousin position changed to relative, what happens now #cousin{
width:100px;
height:100px;
Background:green;
position:relative;
top:100px;
left:100px;} Predictive effect: Because the Father element is already out of the original document flow, the cousin element will top up, and relative positioning at this point is relative to the document, so the position of the cousin should not change. Effect: (as expected, I feel like I'm going to be super-God) again, we change the Father element's position back to relative, when the Father element returns to the document stream, putting the cousin element back to its original position, the father element behind #father{
width:300px;
height:300px;
Background:black;
position:relative;
top:100px;
left:100px;} Predictive effect: Because Father returns to the document stream, the cousin element has to be relegated to the back of the father, and his absolute positioning makes his top a relative Father element
position in the document FlowTo set, so the top of the cousin should be in the position below the father, note the position in the document flow, not the position effect after repositioning: (as expected, my mother called me Home for dinner) summarize:
- Static is the default setting, at which time the Top,left,right,buttom is invalid and no longer elaborated
- Fixed is relative to the browser window to locate, like some websites fixed in the window, lingering ads, follow you go
- Relative does not leave the element out of the document flow, the element still occupies space in its original position, and it is displayed as a deviation from the position, and if the parent element is relative or absolute, it deviates relative to the parent element.
- Absolute will leave the element out of the document flow, similar to flow floats, and, similarly, deviate from the parent element if the parent element is relative or absolute
- Note that the location of all elements is based on the location of the original position in the document flow, not top,left,right,buttom, and so on, remember to remember.
Original content, reproduced please specify the source ~ eat and eat ~
Research on the Position property in CSS (original)
