Home > Developer > JavaScript
Position of CSS positioning: position of css positioning
In front-end webpage layout, we usually use the float attribute to locate the position of webpage elements on the same plane. However, the position attribute in CSS must be used to locate the pop-up layer, floating layer, and page ad plug-ins, for beginners, it is often unclear that the absolute value, relative value, and fixed value of the position attribute should be used, next we will give a brief introduction to the usage of the basic three values of the position attribute, hoping to help beginners.
1. position absolute (absolute positioning)
Here, the position absolute positioning is divided into two categories:
A: defines position: absolute for the element. Its Parent framework does not define any position attribute. In this case, absolute positioning is relative to the edge around the page. The location is calculated based on in the upper left corner of the browser. Absolute positioning makes the element irrelevant to the Document Stream, so it does not occupy space. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. Its location is not affected by the parent framework. It is calculated only on the edge around the page. The Code is as follows:
| 12345678910111213141516171819202122 | <span style="color: #008000;"><!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</style></head> <body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html></span> |
The effect is as follows:
B: defines position: absolute for the element, and its parent framework defines the position: absolute \ position: relative \ position: fixed attribute. In this case, absolute positioning is relative to the edge at the edge of the parent framework. Absolute positioning makes the element irrelevant to the Document Stream, so it does not occupy space. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. Its location is changed only within the parent framework. The Code is as follows:
| 12345678910111213141516171819202122 | <span style="color: #008000;"><!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</style></head> <body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html></span> |
Results:
Therefore, if you want to define the positioning of the page element in the parent element without the display resolution or browser window size restrictions, we recommend that you use B.
2. relative of position (relative positioning)
If an element is relatively located, it first appears at its location. Then, move the element "relative to" its original start point by setting the vertical or horizontal position. (Another point is that elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element will overwrite other boxes ).
Relative is indeed located relative to itself. The parent DIV sets position: relative and does not provide a value. It has no effect on itself.
However, it serves as a reference for its child elements.
3. The fixed of position is always the object when the body is positioned, And the element is always located based on the browser window, locate by using the "left", "top", "right", and "bottom" attributes.
There seems to be a lot more about position usage. The organizational skills of small series language are not very good. Let's summarize the usage:
When you need to implement a drop-down list menu, you need position: relative for the parent element, and position: absolute for the drop-down element in it.
When you need to make a page floating advertisement or make a button to return to the top of the page, you need position: fixed.
Usually we use position: absolute; position: relative to absolutely position the layout, define the positioning through CSS, DIV layout HTML, note where position: relative is used, and where position is used: do not forget to use the combination of left, right, top, and bottom to locate the specific location. Absolute positioning if the parent class does not use position: relative, but directly uses position: absolute for absolute positioning, the body label will be used as the parent class, and position: no matter how many layers of DIV structure the absolute definition object is located, it will be dragged out to the <body> level as the parent level (reference level) for absolute positioning. Absolute positioning is very easy to use, but remember not to abuse it and use it wherever it is. In this way, sometimes the distance between top, bottom, left, and right may not be computed, and CSS code may be bloated, more experienced and suitable for use.
In absolute positioning, we can use css z-index to define the overlapping sequence of css layers.
At the same time, you can use the (Photoshop) PS slicing tool to obtain accurate values for the left, right, bottom, and top values.
At last, let me remind you that if you use the position: absolute attribute to locate the sub-DIV in your parent DIV, the parent DIV does not have any definition (the parent DIV has been filled with other elements), and wants the definition of the child DIV to play a role, in this case, you can define sub-DIV without left, top, right, and bottom. You can use margin-top and margin-left to define the sub-DIV, however, this method is different in ie6/7 from ie8/9/10/11, Firefox, and Google. For ie6/7, you need to use css Hack. The Code is as follows:
| 1234567891011121314151617181920212223 | <span style="color: #008000;"><!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head> <body><div class="all"><img src="1.jpg" width="600" height="600" /><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html></span> |
Results:
Code after CSS Hack is used:
| 1234567891011121314151617181920212223 | <span style="color: #008000;"><!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head> <body><div class="all"><img src="1.jpg" width="600" height="600" /><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html></span> |
The effects of browsers of different versions are as follows:
This method is best not to use CSS Hack adjustments in different browsers!
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
