The basic idea of positioning in CSS is simple, allowing you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself. Here's how to use the CSS position property to achieve the positioning effect.
One: Static positioning (statics)
The element determines the arrangement of the elements in the order in which they are placed in HTML, by default positioning, and the elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations). The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element. This element needs to be set position to static
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP Chinese Network-position element (static positioning)</title>
<style>
.box{
Width: 300px;
Overflow: hidden;
Padding: 10px;
Border: 1px solid #000;
Margin: 10px auto;
}
.static {
Position: static;
Border: 3px solid #007AFF;
}
</style>
</head>
<body>
<div class="box">
<h2>position: static;</h2>
<p>Use position: static; positioned elements, no special positioning, follow normal document stream objects:</p>
<div class="static">
This element uses position: static;
</div>
</div>
</body>
</html>
Two: relative positioning (relative)
Relative positioning is seen as part of the normal flow positioning model. The position of the positioning element can be moved relative to its position in the normal stream. top, left, bottom, and right can all have values. Use a relatively positioned element, regardless of whether it is moving or not, the element still occupies its original page space, you can set the z-index. Make this element closer to the user's line of sight than the element in the document stream, or from the document stream, but the value of the z-index is smaller than the value of this element. The biggest role of relative positioning is to achieve absolute positioning of an element relative to the upper left corner of the element. This element needs to set position to relative.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP Chinese Network-position element (relative positioning)</title>
<style>
.box{
Width: 300px;
Overflow: hidden;
Padding: 10px;
Border: 1px solid #000;
Margin: 10px auto;
}
.box1{
Background-color: red;
Width:100px;
Height:100px;
}
.box2{
Background-color: yellow;
Width:100px;
Height:100px;
Position: relative;
Left: 20px;
}
.box3{
Background-color: blue;
Width:100px;
Height:100px;
Position: relative;
Right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>position: relative;</h2>
<div class="box1">Box in normal position</div>
<div class="box2">Box that moves to the left relative to its normal position</div>
<div class="box3">Box moving to the right relative to its normal position</div>
</div>
</body>
</html>
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Three: Absolute positioning (absolute)
Drag the element that is given absolute positioning from its position in the normal stream, using the left, right, top, bottom, etc. attributes to be absolutely positioned relative to its closest parent element with the most positioned setting, if the element The parent does not set the positioning property, and it is positioned according to the upper left corner of the body element as a reference. Absolute positioning elements can be cascaded, and the stacking order can be controlled by the z-index attribute. The z-index value is a unitless integer, and the larger one can have a negative value.
Absolute positioning method: If its parent element is set to a position other than static, such as position:relative or position:absolute and position:fixed, then it will be positioned relative to its parent element, the position is through left, The top , right , and bottom properties specify that if its parent element does not have a positioning set, then it depends on whether the parent element of the parent element has a positioning. If it still does not continue to push to the higher-level ancestor element, in short, its positioning. That is, relative to the first ancestor element with positioning other than static positioning, if all ancestor elements do not have one of the above three types of positioning, then it will be positioned relative to the document body.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP Chinese Network-position element (absolute positioning)</title>
<style>
.box{
Width: 300px;
Overflow: hidden;
Padding: 10px;
Border: 1px solid #000;
}
.div1 {
Width: 150px;
Height: 150px;
Background: yellow;
}
.div2 {
Width: 150px;
Height: 150px;
Background: red;
Top: 150px;
Left: 100px;
Position: absolute;
}
</style>
</head>
<body>
<div class="box">
<h2>position: absolute;</h2>
<div class="div1">
Parent element
<div class="div2">Child elements</div>
</div>
</div>
</body>
</html>
Fourth, fixed positioning (fixed)
Fixed positioning is similar to absolute positioning, but it is positioned relative to the browser window and does not scroll with the scroll bar.
One of the most common uses for fixed positioning is to create a fixed head, a fixed foot, or a fixed sidebar in the page, without using margin, border, or padding. This element needs to set the position to fixed.
Then the above is about the specific usage of css using the position attribute to achieve the positioning effect, has a certain reference value, I hope to help friends in need!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
