To qt in qss
- float
- Locate
- Box Model
Locate
- Normal flow: that is the position of html
- Relative positioning: relative position of html elements in use, regardless of whether the mobile elements still occupy the original space, override other elements box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home</title>
<link rel="stylesheet" type="text/css" href="css\layout.css">
</head>
<body>
<div id="app">
</div>
<div id="test">
</div>
<div id="sd">
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 50px;
background-color: aqua;
margin-bottom: 20px;
}
#test{
position: relative;
width: 100px;
height: 50px;
background-color:black;
margin-top: 20px;
left: 20px;
top: 30px;
}
#sd{
width: 100px;
height: 50px;
background-color:pink;
}
- float
Absolute positioning: from the general flow, the location is absolutely positioned elements are determined from its nearest ancestor element that has been positioned relative to if no ancestor has been located, then his position relative to the initial containing block.
Because the frame and absolute positioning regardless of document flow, they can cover other elements on the page. The higher values can be controlled .z-index stacking order of the blocks by setting the z-index attribute, block position in the stack higher. However, z-index position can only be used for attribute element .z-index may be negative
*{
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 50px;
background-color: aqua;
margin-bottom: 20px;
}
#test{
position: relative;
width: 100px;
height: 50px;
background-color:black;
margin-top: 20px;
}
#sd{
position: absolute;
width: 100px;
height: 50px;
background-color:pink;
left:0px;
top: 10px;;
}
