Positioning is used when overlap occurs on the page.
1. Fixed positioning: position: fiexd
Does not occupy the original position relative to the browser (out of document flow)
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
Renderings:
2. Relative positioning: position: relative;
Relative positioning will not break out of the document flow, relative to its own position
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position:relative;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
3. Absolute positioning: position: absolute;
Does not occupy the original position (out of the document flow), relative to who will change, if the nearest ancestor element has a positioning attribute, it will be relative to the element, if not, it will be relative to the body
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
Generally, we use the method of father and son to locate, for example:
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: orange;
position: relative;
}
#d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
</div>
</body>
Effect picture:
It can be seen that "I am the first div" is positioned relative to the parent element mydiv.
4. Static positioning: position: static;
The default value of the positioning position property is static. Under this positioning, top, left, bottom, and right settings are all invalid.
5. Hierarchical z-index
z-index sets the level, and the lower value will be overwritten by the higher value.
(1). If absolute is set for all child elements, then all child elements will be stacked together and cover each other.
(2). The prerequisite for using z-index: you need to set the positioning attribute
(3). You can only adjust siblings but not Adjust father and son Son always cover father
(4). Value range: -1~999. -1 is the bottom layer. It is suggested that the popup frame is the son of body.
Before setting the level:
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
#d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
#d2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
}
#d3{
width: 300px;
height: 300px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
<div id="d2">我是第二个div</div>
<div id="d3">我是第三个div</div>
</div>
</body>
After setting the hierarchy:
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
#d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
#d2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
#d3{
width: 300px;
height: 300px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
<div id="d2">我是第二个div</div>
<div id="d3">我是第三个div</div>
</div>
</body>
