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:
<!doctype html>
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:
<!doctype html>
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:
<!doctype html>
Results:
Code after CSS Hack is used:
<!doctype html>
The effects of browsers of different versions are as follows:
This method is best not to use CSS Hack adjustments in different browsers!
Css positioning: position: relative and absoluteIf the parent element is positioned as position: absolute and the child element is positioned as position: absolute, remember to write the coordinates, then the position of the child element is also very different from that of the parent element, for example, if the parent element is position: relative, it is relative to the page, and it is placeholder. The full positioning will affect the next module, for example, a page with a width of PX, there are two element a, element A, 200 in width, 100 in height, Element B 200 in width, and 100 in height. They are in a row. However, I asked element A to locate the middle position, for example, position: relative; top: 0; left: 120px; then Element B will wrap the line, because it cannot be placed, so it will automatically switch to another line, but postion: absolute; will not occupy space, if you use position: absolute; for element A, B will start to typeset from the edge of the page and regard element A as nothing. As for the two questions you asked, first, you need to understand what relative and absolute mean. One is relative positioning, the other is absolute positioning, and the sub-element is also based on the parent element, no matter what the parent element is, the child element is located according to the starting position of the parent element.
Position positioning in css code: relative absolute static. I don't know how to use it. I don't know what it means or what it will do.When using Div + CSS for website layout, positioning issues should be taken into account for some special effects such as floating layers. This requires the Position attribute.
The Position attribute has four values: static, fixed, absolute, and relative,
The latter two are often used in layout positioning, as the name suggests,
Absolute refers to absolute positioning, which means that objects are dragged out of the document stream, and left, right, top, bottom and other attributes are used for absolute positioning. Its stack is defined by the z-index attribute. At this time, the object does not have margins, but still has padding and border.
Ralative refers to relative positioning, which is offset position in normal Document Stream Based on left, right, top, bottom and other attributes.
But how can we use absolute and relative methods?
I have never studied it carefully before, and sometimes it will be a bit confused when it comes to specific applications. I believe many friends will also have such problems. Today, I tested it and came to the following conclusions:
1. When the Position property value is Relative, the original Position of the object is retained, the objects following it remain at the Top of the original position according to the original document stream. This indicates that the object is offset down from the original position. The bottom value indicates that the object is offset up from the original position. Both objects exist at the same time., only Top is used. The left value indicates the right distance between the object and the original position. the right value indicates the distance between the object and the original position to the left offset. Only left takes effect.
2. When the Position property value is absolute, the object is extracted from the document stream, the original position is replaced by the following objects. The Top value indicates the distance between the upper border of the object and the Top of the browser window. The bottom value indicates the distance between the bottom border of the object and the bottom of the browser window., if neither of them is specified, the Top is the same as the original file stream position, that is, the vertical position remains unchanged. The left value indicates the distance between the left border of the object and the left border of the browser window. the right value indicates that the distance between the right Border of the object and the right border of the browser window exists simultaneously, and only left takes effect; if neither of them is specified, the left side of the stream is the same as that of the original document, that is, the horizontal position remains unchanged.
When the Position attribute value is absolute, if there is a first-level parent object (whether it is a parent object or a grandfather object, or a later generation, the same), the Position attribute value is Relative, the above-mentioned relative browser window positioning will become relative parent object positioning, which is helpful for precise positioning.
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
