Home > Developer > Web Develop
In the front page layout, in the same plane layout, most of us use the Float property to locate the location of the page element. But involves the popup layer, the floating layer, the page advertisement plug-in and so on, all need the CSS position attribute to locate, for the beginner often is not clear is should use the position attribute absolute value, the relative value, the fixed value and so on, Here we will position the basic attributes of the three values of the use of doing some simple introduction, hoping to some help for beginners.
1, Position's absolute (absolute positioning)
Here position absolute Absolute positioning we are divided into two categories:
A: Position:absolute is defined for an element, and its parent framework does not define any position properties. The absolute positioning at this point is relative to the top of the page four weeks, the location will be based on the top left corner of the browser 0 points, the absolute positioning of the element is independent of the document flow, and therefore does not occupy space. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. Its position is not affected by the parent frame, and is calculated only at the edge of the page. The code is as follows:
| 12345678910111213141516171819202122 | |
Effects such as:
B: Defines the position:absolute for the element, whose parent frame defines the Position:absolute\position:relative\position:fixed property. Absolute positioning at this point is relative to the top edge of the parent frame to be positioned, absolute positioning makes the element independent of the document flow, and therefore does not occupy space. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. Its location changes only within the parent frame, with the following code:
| 12345678910111213141516171819202122 | |
Effects such as
Therefore, if the page element is positioned, and you want to define it within the parent element, regardless of the display resolution, browser window size, etc., it is recommended to use a B scheme.
2, Position relative (relative positioning)
If you are relative to an element, first it will appear where it is located. It then moves the element "relative to" its original starting point by setting the vertical or horizontal position. (again, relative positioning, regardless of whether or not to move, the element still occupies the original space.) Therefore, moving an element causes it to overwrite other boxes).
Relative is indeed relative to their own positioning, the parent div set the position:relative not given the value, it itself is not effective
But it has a referential effect on its child elements.
3, position fixed fixed always with the body as the object when positioning, always based on the browser's window to locate elements, through the "left", "Top", "right", "bottom" properties to locate.
About position usage seems to have a lot of, small language organization ability is not too good, summarize the usage:
When you need to do a drop-down level two menu effect, the parent element you need to position:relative, while the inside of the drop-down elements need to position:absolute.
When you need to make a page floating ad, or make a button that returns to the top of the page, you need to position:fixed.
Usually we use position:absolute;position:relative for absolute positioning layout, to define positioning through CSS, div layout html, note where to use position:relative, Where to use Position:absolute for positioning, and do not forget to use the left, right, top, bottom to locate the specific location of the mate. Absolute positioning if the parent does not use position:relative, and the direct use of position:absolute absolute positioning, this time will be the body tag as the parent, using Position:absolute to define the object regardless of the number of layers in the div structure, Will be dragged out to be absolutely positioned at <body> for the parent (reference level). Absolute positioning is very useful, but remember not to misuse, where all use, so sometimes lazy to calculate the distance up, down, left, and right spacing, and may cause the CSS code bloated, more experience appropriate use, for the use of the place.
In absolute positioning we can use CSS Z-index to define the CSS layer overlap order.
You can use the Photoshop PS slicing tool to get accurate values for left, right, bottom, and top values.
Finally, the small part in the reminder, if you in your parent div inside the sub-div used the Position:absolute property positioning, and the parent Div does not make any definition (the parent Div is already occupied by other elements), but also want the sub-div definition play a role, This time sub-div you can not use left, top, right, bottom to define, can be used Margin-top, margin-left to define, but this method in Ie6/7 and IE8/9/10/11, Firefox, Google under the location is not the same, For IE6/7 you need to use CSS Hack, the code is as follows:
| 1234567891011121314151617181920212223 | |
Effects such as
After using CSS hack code:
| 1234567891011121314151617181920212223 | |
The effect is as follows in each version of the browser
This method is best not to use in different versions of the browser need to back and forth with the CSS hack adjustment!
The position of CSS 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
