In the last chapter we talked about the fluid properties of absolute and CSS properties used with absolute. In this chapter we will talk about the other two members of position family — Relative and Fixed.
Theoretically, both relative/absolute/fixed can limit the “wrapping” and “positioning” of absolute, but only relative can keep elements in the normal document flow, so we often use Absolute with relative. As mentioned above, left/right/top/bottom is a unique attribute of the positioning family, so relative also supports positioning, and relative positioning has two characteristics: one is relative to itself, and the other is “non-invasive”. In order to better demonstrate the characteristics of relative, absolute element is introduced for comparison.
Test 1: left:0,top:0;
<! -- Relative positioning test -->
<div class="container">
<div class="relative">relative</div>
<div class="absolute">absolute</div>
</div>
<style>
.container{
width: 200px;
height: 200px;
background: # 999999;
padding:100px;
border:5px solid red;
position: relative;
}
.relative{
width: 100px;
height: 100px;
background: green;
position: relative;
left: 0;
top: 0;
}
.absolute{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 0;
top: 0;
}
</style>
Copy the code
In the first test, the absolute inclusion block is the padding-box of the parent element, so absolute moves to the upper left corner of the inclusion block, while the relative element does nothing.
Test 2: left:100px; top:100px;
The result of test 2 shows that “relative” element is offset with respect to itself, that is to say, the offset position of “relative” element is related to its original position, which is the first feature — relative positioning.
Test three: Join the masses eating melons.
Relative before positioning:
<! -- Relative positioning test -->
<div class="container">
<div class="">I am a melon eater</div>
<div class="relative">relative</div>
<! -- <div class="absolute">absolute</div> -->
<div class="">I am a melon eater</div>
</div>
<style>
.container{
width: 200px;
height: 200px;
background: # 999999;
padding:100px;
border:5px solid red;
position: relative;
}
.relative{
width: 100px;
height: 100px;
background: green;
position: relative;
/*left: 100px; top: 100px; * /
}
.absolute{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 100px;
top: 100px;
}
</style>
Copy the code
Relative after positioning:
<! -- Relative positioning test -->
<div class="container">
<div class="">I am a melon eater</div>
<div class="relative">relative</div>
<! -- <div class="absolute">absolute</div> -->
<div class="">I am a melon eater</div>
</div>
<style>
.container{
width: 200px;
height: 200px;
background: # 999999;
padding:100px;
border:5px solid red;
position: relative;
}
.relative{
width: 100px;
height: 100px;
background: green;
position: relative;
left: 100px;
top: 100px;
}
.absolute{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 100px;
top: 100px;
}
</style>
Copy the code
It can be found that before and after the relative positioning of relative elements, the position of melon eaters remains unchanged, and only relative to itself is offset. Therefore, relative is a non-invasive positioning that does not affect the original layout behavior of other elements.
The relative values of the left/right/top/bottom elements are calculated relative to the containing block. The relative values of the left/right/top/bottom elements are calculated relative to the containing block. The relative values of the left/right/ bottom elements are calculated relative to the containing block. 0) Does not maintain the absolute stretching property, but takes one side of the document flow direction as the unique value, i.e. only keeps left and top.
In test 3, we saw a cascade phenomenon, and the author does not recommend using “relative” for positioning since the sequence of “relative” elements is “geek-level” (the cascade rules will be explained in more detail in a subsequent article). So relative is almost a subordinate CSS to Absolute.
2. Fixed without dependence
The “contain block” of the fixed element is the root element (approximate). If you remember the feature of dependency free absolute positioning, let’s test whether there is dependency free fixed positioning.
<! -- Fixed positioning without dependence -->
<div class="container">
<span>Just say something</span>
<div class="fixed"></div>
</div>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: # 999999;
padding:100px;
border:5px solid red;
}
.fixed{
width: 100px;
height: 100px;
background: green;
position: fixed;
}
</style>
Copy the code
After testing, it is found that undependent fixed positioning does exist and performs “the same” as undependent absolute positioning. So what’s the use of knowing this feature? Personally, there is no soft use, since the use of fixed positioning, is to use its dependencies with elements for positioning, so there is no soft use of fixed positioning without dependence.
3. Use fixed positioning to generate scroll bar locking popover
Usually, popovers need to be positioned by the browser, not an element, because we want popovers to always be “centered” on the screen. This is as simple as using a fixed position.
<! -- Fixed position generating popover -->
<div class="fixed">
<div>I am a popup window</div>
</div>
<style>
html.body{
margin: 0;
height: 200%;
background-image: url('.. / Little monk. JPG ');
}
.fixed{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0.0.0.0.5);
margin: auto;
}
.fixed div{
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 30%;
background: #fff;
margin: auto;
overflow: auto;
}
</style>
Copy the code
We have achieved the center effect, but there is another trouble is that the contained block of fixed element is HTML, so when the HTML content has a scroll bar, we can still control the scrolling of the HTML scroll bar in the popover page, which is not a good user experience.
So if we need a fixed scroll bar popover, we need to make sure that the scroll bar is not in HTML, we can create a parent container under the HTML, and let the parent container generate the scroll bar, so that the fixed position is not affected. As shown below.
<! Fixed location generating popover that could not scroll -->
<div class="father">
<div style="height: 200%; background: url('.. / little monk. JPG ');">Let me generate the scrollbar</div>
<div class="fixed">
<div>I am a popup window</div>
</div>
</div>
<style>
html.body{
margin: 0;
height: 100%;
overflow: hidden;
}
.father{
height: 100%;
overflow: auto;
}
.fixed{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0.0.0.0.5);
margin: auto;
}
.fixed div{
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 30%;
background: #fff;
margin: auto;
overflow: auto;
}
</style>
Copy the code
Positioning elements is the end of this chapter. Positioning elements are widely used in CSS, so a detailed understanding of their features can help you better layout.
Never forget why you started, and your mission can be accomplished.
You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.
