Positioning has always been a difficult point in Web standard applications. If you cannot clearly identify it, the effects that should be achieved may not be achieved, and the effects may be different. If the positioning principle is clarified, the positioning will make the web page more perfect.
Definition of positioning:
In CSS, the positioning content is: Position: relative | absolute | static | fixed.
Static does not have special settings. It follows basic positioning rules and cannot be hierarchical using Z-index.
Relative is not separated from the document stream. Based on its own static position, it locates through top, bottom, left, right, and hierarchical classification can be performed through Z-index.
Absolute disconnects from the document stream and locates through top, bottom, left, right. Select the most recent parent-level positioning element. When the parent-level position is static, the absolute element is located at the origin of the body coordinate, and can be hierarchical using Z-index.
Fixed fixed positioning. Here, the fixed pair is like a visible window, not a body or a parent element. You can perform hierarchical classification using Z-index.
Cascading classification in CSS: Z-index: auto | namber;
Auto follows the positioning of its parent object
Namber has no integer unit. Negative
Positioning principle:
Element that can be displaced (relative positioning)
In the stream of this article, any element is limited by the position of the text stream, but through CSS we still make these elements can change their position, we can use float to let the elements float, or we can use margin to let the elements generate positions move. But in fact it is not a real shift, because it is only a blind eye that is achieved by increasing the margin value. In the true sense, the displacement is achieved through top, right, bottom, left (hereinafter referred to as trbl, trbl can be used in different folds .) Generated for a relatively located element. Let's look at the figure below:
We can see that the figure shows an element with a width of 200px, a height of 50px, a margin: 25px, a border: 25px solid #333, and a padding: 25px element with a relative positioning distance of 50px, 50 PX left. The lower part is a default Black Block. We can see that this part of the block in the text stream is blocked by the relative positioning above. This shows: "When the element is set to relative positioning or absolute positioning, it will automatically generate a stack, their cascade level is naturally higher than the text stream ". Unless its Z-index value is set to a negative value, it is not displayed when the Z-index value is a negative value in Firefox and other browsers. In addition, we found that when the relative positioning element is displaced, the content of the expression is already out of the text stream, it is only in the stream of this article that the original absolute positioning leaves the original total width and total height (the content height or width plus the value of margin \ border \ padding ). This indicates that in relative positioning, although the presentation area is out of the original text stream, there is also an old location in the text stream. In practice, if the displacement value of the positioning is too large, a blank area will be formed in the original area.
In addition, we note that the coordinate point of the positioning element is at the upper left edge of the margin value, that is, point B in the figure. Then all the displacement calculations will be based on this point for element pushing. When trbl is a positive value, the direction of the displacement is cohesion. Some can be pushed. When trbl is a negative value, the direction of the displacement is outer. The arrows with a displacement point to the logo in the image. The positive displacement direction is displayed with the plus sign, and the negative displacement direction is shown with the minus sign. For more information about the displacement and orientation, see the Introduction to margin attributes (1) by Feifei.
Elements that can be located at any position (absolute positioning)
As mentioned above: relative positioning can only move up and down in the text stream, but it also has some limitations. Although its presentation area is out of the text stream, however, he still reserves a place in the text stream. This is like a working person who has gone to another place, but he still has a dedicated position in his hometown, this position should not be changed as he moves. However, this clearly leaves a blank space. If you want the text stream to discard this part, you need to use absolute positioning. Absolute positioning is not just separated from the text stream, in addition, the absolute positioning element is not left with a dedicated space in the text stream, which is like a worker in a factory, if a worker leaves, other workers are required to fill the position. The moving part naturally becomes a free body. Absolute positioning will allow you to set the element to any position through trbl. When the position attribute of the parent layer is the default value, the coordinate origin of trbl starts with the coordinate origin of the body. See:
We can see that the content in the text stream is definitely positioned as a non-prime position, and it is not polite at all. The absolute positioning elements are naturally stacked on the text stream. In a single absolute positioning, the positioning element will go to the upper-left corner of the page, because it is the coordinate origin after their absolute positioning.
Absolute location of Association
The above is purely absolute positioning, and we often need a special form in practical applications. That is to say, the positioning element must have the absolute positioning feature, but the absolute positioning coordinate origin can be fixed at a certain point on the webpage, when this point is moved, the absolute position element is expected to ensure the relative position relative to the original coordinate. That is to say, this absolute positioning is required to move along with the webpage, and it is determined by a fixed position on the webpage. This effect is particularly important when the webpage is centered. The basic way to achieve this effect is to set relative positioning for the parent level of the absolute positioning. Then, the absolute positioning coordinates start with the parent level.
Even so, the coordinate origin is not the coordinate origin of the parent level, which is a very strange coordinate position. Let's take a look at the model diagram:
We can see that in this figure, the parent level is a black-gray block, and the child level is a blue block. Parent level is relative positioning, and child level is absolute positioning. The sub-level is set to 50 pixels at the top and 50 pixels at the left tilt. We can see that the child coordinate origin does not shift 50 pixels from the parent coordinate origin, but from the upper left edge of the padding of the parent block to the coordinate origin. The parent level does not affect the location relationship between the absolute positioning element and the parent level relative positioning element if location movement or browser window size changes. This sublevel does not need to be adjusted.
This is a very special and practical application method. If you are not comfortable with positioning, I believe that after reading the explanations here, you will certainly be able to use positioning as you like.
Elements in sight (fixed positioning)
Due to the spread of advertisements, some browser software began to intercept advertisement content, so that some good results are not recommended for use now. For example, an element may change its position as the webpage rolls. Now, I can use a position attribute in CSS to achieve this effect. This element attribute is the position: fixed that was not supported in the past. Its meaning is fixed positioning. This fixed position is very similar to absolute positioning. The only difference is that absolute positioning is fixed in a certain position on the webpage, while fixed positioning is fixed in the browser's frame position.
Although the original browser does not support a property, the development of the Browser allows the current advanced browser to correctly parse this CSS property. In addition, IE6 can achieve this effect through CSS hack (ie5.x cannot be used currently. In order not to turn this article into a lengthy topic, only this instance is provided here.Article. You can analyze some questions about this instance on your own. Leave me a message if you have any questions!
| Reference content is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
* Html # menu {position: absolute; Right: 16px;}/* only for IE */
/*]> */ <Div> check the content in the upper right corner. No matter how the browser scrolls, it is always in that place! </Div>
</Body>
</Html> |
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
