Home >Web Front-end >CSS Tutorial >css absolute positioning
css absolute positioning
- 无忌哥哥Original
- 2018-06-28 17:56:521992browse
Four modes of positioning: static, relative, absolute, fixed
Four positions of positioning: left, right, top, bottom
Positioning attribute: position, there are four states Value
1.static: Static positioning, arranged in the order of elements in the document flow, this is the default value, the four positions are invalid
2.relative: Relative positioning, the element is relative to the original It is positioned in the document flow, four positions are valid
3.absolute: Absolute positioning, the element is positioned relative to its positioning parent, out of the document flow, four positions are valid
4.fixed: Fixed positioning, similar to the absolute positioning class, is also separated from the document flow. The position of the element on the page is fixed and does not scroll with the page. Four positions are valid
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.绝对定位</title>
<style>
/*body {*/
/*border: 1px solid red;*/
/*}*/
.box {
width: 600px;
height: 600px;
background-color: yellow;
}
.box1 {
width:200px;
height: 200px;
background-color: lightskyblue;
position: absolute;
top:0;
right:0;
}
.box2 {
width:200px;
/*width:250px;*/
height: 200px;
/*height: 250px;*/
background-color: lightgreen;
}
.box3 {
width:200px;
height: 200px;
background-color: lightcoral; /*珊瑚色*/
}
.box4 {
width:200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>The above is the detailed content of css absolute positioning. For more information, please follow other related articles on the PHP Chinese website!