CSS entry notes 4 table of contents
- Hierarchical div, CSS positioning position, cascading context
-
- Preface
-
- 1. Div layering
- 2. CSS positioning position
- Three-tier context
Hierarchical div, CSS positioning position, cascading context
Preface
This is the knowledge point I summarized on the way of learning. The source code graphic introduces the layered div, CSS positioning position, and cascading context in detail. I hope it will be helpful to everyone, and I will continue to Gauguin. Let's make progress together in the new year!
1. Div layering
The next step is to verify the position of each element in the div layer. The main idea is to overlap and cover
1.1 Where does the background range from? Where is the background color div
The background range is the area enclosed from the outer edge of the border.
Ideas
How to verify it?
It can be seen by setting the border semi-transparent
process
code show as below
<head>
...
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.demo{
box-sizing: border-box;
margin: 12px;
border: 10px solid rgba(255,0,0,1);
padding: 22px;
width: 100px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="demo">
内容
</div>
</body>
The specific code can be viewed at http://js.jirengu.com/vemax/1/edit?html, css, output
The effect obtained by adjusting the border transparency 1 to 0 through the developer tools is as follows
in conclusion
Red becomes transparent, blue appears-"It can be concluded that the background range is to the end of the area enclosed by the outer edge of the border, which proves that the background background color is below the border boder
1.2 Where is the text content?
Ideas
It can be seen from the front that the content covers the background color, and the content is on the background. Is the content on the border?
It can be verified by code.
process
On the basis of the above code, add a span element ( <span class=text>内容</span>) to the div, and then set the style to increase the font size ( .text{ font-size: 100px; color: green }).
The specific code can be viewed at http://js.jirengu.com/zifot/1/edit?html, css, output
It can be seen that the effect is as follows
in conclusion
It can be seen from the picture that the content covers the border-so the content is above the border
1.3 Where are the sub-elements of that block?
Ideas
By adding block-level child elements, it overlaps with the comparison object
process
Still pass code verification
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="demo">
我是文字内容
<div class="childDiv"></div>
</div>
</body>
Added a block-level child element childDiv to the div, set its style to white, and moved it up by -10px
in conclusion
-
It can be seen that the white div of the block-level child element is on the background of the parent div-"The block-level child element is on the background.
-
It can be seen that the text content of the parent div covers the white div--"It can be concluded that the text content is the inline child element above the block-level child element
1.4 Where is the floating element?
Ideas
Add a green left floating div in the parent div, and set the right margin to -20px to overlap the text.
process
code show as below
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
}
.float{
float: left;
background: green;
height: 50px;
width: 50px;
color: red;
margin-right: -20px;
}
</style>
</head>
<body>
<div class="demo">
我是文字内容
<div class="float"></div>
<div class="childDiv"></div>
</div>
</body>
The specific code can be viewed at http://js.jirengu.com/zaban/1/edit?html, css, output
The effect diagram is as follows
in conclusion
-
It can be seen that the green floating element covers the white non-floating element-"The floating element is above the block-level child element.
-
It can be seen that the text covers the green floating element-"The inline child element is above the floating element
1.5 Based on the above, this figure can be verified:
No matter whether the text is on the outermost part or inside a certain element div, it is treated equally.
2. CSS positioning position
After understanding the div layering, let's understand the CSS positioning position.
What is the difference between the layout and positioning written in CSS Getting Started Note 3 ?
The layout is the screen plane on
Positioning is perpendicular to the screen
Understand CSS positioning first understand document flow and box model
Both the document flow and the box model can view the CSS entry notes 2
Or check the standard document document flow (normal_flow) MDN / box model (box model) MDN
Five values of position
选择器{
...
position: 五个取值;
}
2.1 static
static is the default, which means that the current element is in the document flow
选择器{
...
position: static;
}
2.2 relative relative positioning
Relative positioning rises, but does not deviate from the document flow
选择器{
...
position: relative;
}
scenes to be used:
- For the
specific code used for displacement (rarely used) , please check http://js.jirengu.com/newuc/1/edit?html, css, output
From the perspective of the black div, your green div is still in its original position, and the position you occupy remains the same, but the displayed place is a bit offset.
-
Used to parent sbsolute
-
With z-index
z-index: auto; default value, do not create a new cascading context
z-index: 0/1/2;
z-index: -1/-2
The default z-index is auto, the value calculated by auto is 0, but 0 cannot be written (0 may create a cascading context),
2.3.absolute absolute positioning
Will be positioned relative to the first positioned element of the ancestor element (as long as it is not staic) , mainly matched with relative
- scenes to be used
- Break away from the original position and create a new layer, such as the close button of a dialog box
The specific code can be viewed at http://js.jirengu.com/zizaf/1/edit?html, css, output
- Mouse hover display content function
<head>
...
<style>
.container{
border: 1px solid red;
height: 300px;
position: relative;
padding: 20px;
}
button{
position: relative;
}
button span{
position: absolute;
border: 1px solid red;
white-space: nowrap;
/*控制文字内容不准换行*/
bottom: calc(100% + 10px);
/*距离底部100%再加10px*/
left: 50%;
transform: translateX(-50%)
}
/*默认不浮现，悬浮着浮现*/
button span{
display: none;
}
button:hover span{
display: inline-block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div style="height: 100px;"></div>
<button>点击
<span class=tips>提示内容</span>
</button>
</div>
</body>
Please check the specific code http://js.jirengu.com/zosof/1/edit?html,css,output
Similar effects are as follows
- Can be used with z-index
On some browsers, if you don’t write top/left, the position will be confused
Make good use of left: 100%; used to find location
Make good use of left: 50%; add negative margin (or transform: translateX(50%);...)
2.4 fixd relative viewport positioning
The viewport (viewport) is the area that this webpage can show the user
Don't put fixd inside a transform attribute, it will not be orthogonal.
Try not to use this attribute on your mobile phone, there will be many problems
- scenes to be used
- Annoying ads
- Back to top button
For specific code, please see http://js.jirengu.com/sibulo/1/edit?html,css,output
- With z-index
2.5 sticky sticky positioning
Can be used as a navigation bar, poor compatibility (compatibility can be found by searching sticky in caniuse.com )
Similar to the following
The specific code can be viewed at http://js.jirengu.com/rajeg/1/edit?html, css, output
Three-tier context
Also called stacking context
3.1 Positioning elements
The positioning element is at the top by default (z-index=0/1/2/...), it will be based on that layer, and it will keep going up. If the z-index is -1, it will be under the background and go down. The z-index cannot exceed the cascading context when it is negative. It doesn't make sense to run behind html.
<head>
...
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;}
.container{
border: 1px solid black;
height: 200px;
background: rgba(52, 235, 232, .5);
/*设置半透明可以看到背景下的relativ2的黑色*/
}
.relative{
height: 50px;
background: red;
position: relative;
margin-top: -10px;
}
.relative2{
height: 50px;
background: black;
position: relative;
top: -20px;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
我是文字
<div class="relative"></div>
<div class="relative2"></div>
</div>
</body>
The specific code can be viewed at http://js.jirengu.com/wupop/2/edit?html, css, output
The effect diagram is as follows
in conclusion
It can be seen from the picture that the red relative positioning box covers the text-the positioning element is on the top
It can be seen from the figure that the translucent blue background of the container covers the background of box 2 with z-index: -1;. . . – "At the bottom
There is a picture drawn by the teacher to illustrate
3.2 Can positioning elements depend on the z-index size?
No, it depends on whether they are in the same scope.
z-index: 9; is it greater than z-index: 2;?
Use code to verify
The specific code can be viewed at http://js.jirengu.com/dayev/2/edit?html, css, output
in conclusion:
- The blue 2 covers the red 9—" a and b2 are in the same small world (the stacked context brought by the container). The z-index in this small world has nothing to do with the outside world. Only z-indexes in the same small world can be compared
3.3 What attributes can create a cascading context?
The above code is to create a stacking context in absolute relative positioning where the z-index value is not auto. The above relative with z-index also talks about z-index: auto; the default value does not create a new stacking context
There are many situations where you can create a cascading context, and some non-orthogonal properties can also be created. The ones that need to be remembered are:
-
z-index (the element whose position value is absolute (absolute positioning) or relative (relative positioning) and the z-index value is not auto)
-
flex(flex (flexbox) container child element, and the z-index value is not auto;)
-
opacity (elements with an opacity attribute value less than 1)
-
transform (attribute value is not none)
You can search "Cascading Context MDN" to learn more about cascading context and how to create it.
–continue
I am on my way to learn the front end from entry to soil. Every time you watch, it is your greatest encouragement to my learning journey, let's work hard together!
Welcome to leave your valuable comments.
