Home >Web Front-end >Front-end Q&A >What are css positioning
What are css positioning
- 藏色散人Original
- 2021-04-13 09:08:263305browse
CSS positioning includes: 1. static, which means static positioning; 2. relative, which means relative positioning; 3. absolute, which means absolute positioning; 4. fixed, which means fixed positioning.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
CSS Positioning property allows you to position elements. CSS provides properties for positioning that allow you to create columnar layouts, overlap one part of a layout with another, and accomplish tasks that for years often required the use of multiple tables.
Several ways of css positioning:
1. static (static positioning):
Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). Refer to the previous essay.
2. Relative (relative positioning):
The element positioned as relative is separated from the normal document flow, but its position in the document flow still exists, but it is visually different from the original position. move.
Position relative to its normal (original) position through the settings of top, bottom, left, and right. Hierarchical grading can be done through z-index.
.static1{
height:80px;
background-color: red;
}
.relative{
height:80px;
position:relative;
top:40px;
left:40px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="relative"></div>
<div class="static2"></div>
</body>3. Absolute (absolute positioning): Generate absolutely positioned elements and position them relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.
The layer positioned as absolute is separated from the normal document flow, but the difference from relative is that its position in the normal flow no longer exists.
Some people always give misleading information about this attribute. It is said that when the position attribute is set to absolute, it is always positioned according to the browser window. This is actually wrong. In fact, this is a characteristic of fixed properties.
<style type="text/css">
.static1{
height:80px;
background-color: red;
}
.father{
height:100px;
background-color: pink;
position:relative;
left:20px;
}
.relative{
height:80px;
width:80px;
position:absolute;
top:10px;
left:10px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>4. Fixed (fixed positioning): Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.
<style type="text/css">
.static1{
height:80px;
background-color: red;
}
.father{
height:100px;
width:300px;
background-color: pink;
left:100px;
top:100px;
}
.relative{
height:80px;
width:80px;
position:fixed;
left:20px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>【Recommended learning: css video tutorial】
The above is the detailed content of What are css positioning. For more information, please follow other related articles on the PHP Chinese website!