Document flow:
Document flow, refers to the box in order from top to bottom successively html tags written, from left to right. Block elements per line, the line elements to the left in a row in the arrangement, to write the first arrangement, the writing at the back, each box occupies its position.
About positioning:
Css position property may be used to set the type of positioning elements, position setting items are as follows:
(1) relative to generate relative positioning of the elements, the position occupied by the element of the document flow retention, the elements themselves offset home position relative to itself.
(2) absolute generates absolute positioning, an element from the document stream, the stream does not occupy the position of the document, can be understood as floating above the document flow, it is provided with respect to a parent element positioned to locate, if no it is positioned relative to the body element.
(3) fixed to generate a fixed positioning element, stream element from the document, the document does not occupy the position of the stream, it can be understood as floating above the document flow, relative positioning of the browser window.
(4) static default value, is not located, elements that appear in the normal flow of the document, or the equivalent untargeted property without a positioning property. (use less)
(5) inherit the property value of position inherited from the parent element. (use less)
Offset positioning elements:
Positioning elements need to use left, right, top or bottom set with respect to the offset value of the reference element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
/* 3.父级设置相对定位 */
/*position:relative;*/
}
.box01,.box02{
width:300px;
height:100px;
margin:10px;
}
.box01{
background-color:green;
/* 1.相对定位 */
/*position:relative; */
/*left:50px;*/
/*top:50px;*/
/* 2.绝对定位 相对于body进行定位 */
/*position:absolute;*/
/*left:50px;*/
/*top:50px;*/
/* 3.父级设置相对，子集设置绝对 */
/*position:absolute;*/
/*left:50px;*/
/*top:50px;*/
/* 4.固定定位 */
position:fixed;
left:50px;
top:50px;
}
.box02{
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>effect:
Positioning element level:
Floating elements are positioned on the normal document flow, can be used to set the z-index attribute hierarchy of elements
Such as:
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10; /* 将元素层级设置为10 */
}Positioning element characteristics:
Absolute positioning and fixing block elements and the positioning elements are automatically converted to the row lines within the block elements
To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a full-stack Learning Exchange front-end circle: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.