Hello everyone, I’m IT sharer, also known as Pipi. In this article we will talk about CSS positioning.
I. Position
CSS positioning properties allow you to position an element. It can also place one element after another and specify what should happen when the content of an element becomes too large.
Elements can be positioned using top, bottom, left and right attributes. However, these properties will not work unless the Position property is set first. They also work in different ways, depending on the positioning method.
Second, properties,
1. Static Positioning (default)
The default value for an HTML element, that is, without positioning, the element appears in a normal stream.
Statically positioned elements are not affected by top, bottom, left, and right.
2. Fixed position
The position of the element is fixed relative to the browser window.
Even if the window scrolls, it doesn’t move:
<! DOCTYPE html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <head> <style> p.pos_fixed { position: fixed; top: 30px; right: 5px; } </style> </head> <body> <p class="pos_fixed">Some more text</p> <p><b>Note: .</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> </body> </html>Copy the codeNote:
Fixed positioning makes the position of the element independent of the document flow and therefore does not take up space.
Fixed positioned elements overlap with other elements.
3. The Relative positioning
Positioning an element is positioned relative to its normal position.
<! DOCTYPE html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=640, Font-size: 16px; font-size: 16px; font-size: 16px; font-size: 16px; font-size: 16px; font-size: 16px; left: -20px; } h2.pos_right { position: relative; left: 20px; } </style> </head> <body style="background-color:azure;" >< p>Some more text</p> <p><b>Note:</b> .</p> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> </body> </html>Copy the code
The contents of relative positioning elements and overlapping elements can be moved, and the space it originally occupies does not change.
h2.pos_top{
position:relative;
top:-50px;
}
Copy the code
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
4. Absolute positioning
The position of an absolutely positioned element is relative to the nearest positioned parent, or if the element has no positioned parent, then its position is relative to:
h2{
position:absolute;
left:100px;
top:150px;
}
Copy the code
Absolutely positioning makes the location of the element independent of the document flow and therefore does not take up space.
Elements positioned by Absolutely overlap with other elements.
Three, overlapping elements
The positioning of elements is independent of the document flow, so they can override other elements on the page
The z-index attribute specifies the stacking order of an element (which element should be placed first, or last)
An element can be stacked in either positive or negative order:
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Copy the code
Elements with a higher stack order always precede elements with a lower stack order.
Note: If two positioning elements overlap and z-index is not specified, the element that was last positioned in the HTML code will be displayed first.
Four,
Based on Html, this article mainly introduces four positioning methods in CSS. For four kinds of positioning forms, with rich cases, code renderings, to help you better understand.
Finally, I hope to help you better learn CSS3.