Shulou(Shulou.com)06/01 Report--

This article shares with you the content of a sample analysis of CSS positioning properties. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Professional explanation of positioning

(1) grammar

Position:static | absolute | fixed | relative

(2) description

As can be seen from the above syntax, there are many methods of positioning, which are static (static), absolute positioning (absolute), fixed (fixed), and relative positioning (relative). In this tutorial, I will not talk about one by one, but only the two most commonly used and practical positioning methods: absolute positioning (absolute) and relative positioning (relative).

Absolute positioning (absolute): drag the object given this positioning method from the document flow, and use attributes such as left,right,top,bottom to make absolute positioning relative to the nearest parent object with the most positioning settings. If the parent of the object does not set positioning properties, that is, it still follows the HTML positioning rules, positioning is based on the upper-left corner of the body object as a reference. Absolute positioning objects can be cascaded, the cascading order can be controlled by the z-index attribute, the z-index value is a unitless integer, the large one is at the top, and can have a negative value (currently, negative FF is not supported).

Relative positioning (relative): objects cannot be cascaded and offset in the normal document stream according to attributes such as left,right,top,bottom. You can also use z-index hierarchical design.

two。 Image interpretation of orientation

Let me first set up a virtual scene: there is a rectangular room with a bucket filled with water and a watermelon soaked in it. There are many hooks for hanging things in this room. Now I correspond the web page elements to the above objects, then the room is a web page, the bucket is a section of the web page, the water in the bucket is the text flow, and the watermelon is the object to be located.

(1) absolute positioning of contribution (absolute)

Compared to the previous explanation, if the watermelon is given absolute positioning, it is tantamount to pulling the watermelon out of the water and hanging it on a hook in mid-air, and the water originally occupied by the watermelon in the bucket will automatically fill it (the absolute positioning object will give up its original position, so it is a contribution). At this time, if there is no positioning setting for the bucket before, then the position of the picked up watermelon will no longer be affected by the position of the bucket, how the bucket moves, the watermelon is still hanging in the original position, as for how to put the watermelon, then take the upper left corner of the room (upper left corner of body) as standard, and use left,right,top and bottomvalue to locate.

But if the bucket also gives the positioning setting (usually relative positioning, which is discussed below), the placement of the watermelon is not so free, although the watermelon is picked up at this time will not affect the water in the bucket (text flow), but it still has to listen to the bucket, the bucket will tell the watermelon, "you can move, but you should walk within my range, for example, I want you to be 1 meter above me." If there are many watermelons in the bucket, all of them can be taken out and hung in mid-air, they will be arranged in spaces of different heights (layers), so if you look down vertically on the roof, it is possible to see different watermelons stacked together (this so-called height does not exist in the web page, just like elements are arranged on different layers in FLASH animation. But they don't have a sense of depth when they look. It can be seen that the object reference target of absolute positioning is its parent, which is professionally called the inclusion block.

(2) selfish relative positioning (relative)

One of the most important features of relative positioning is that it still occupies the original position through positioning and does not give way to objects such as text streams around him. Relative positioning is also relatively independent, it is in charge of what it does, and when it wants to locate, it is offset by its own position (relative to the object itself). Then take the front as an example, then the watermelon seems to be magical at this time. If the watermelon shifts in the bucket through relative positioning, you will see a phenomenon that does not exist in real life: there is a concave in the water. The surrounding water can't fill it, and the watermelon looks on the side. If you stir the water in the bucket, the concave position will be changed (text flow still has an effect on the relative positioning object). But the distance from the recess to the appearance of the watermelon is always the same. It can be seen that the text stream and it also interact with each other, because the object is not really separated from the text stream, just like two people have a chance to meet while moving horizontally on the same floor.

(3) summarize the characteristics of two kinds of positioning.

Absolute positioning is like placing different objects on different floors of a tall building (usually not the first floor, which we understand here means that the text stream is placed on the first floor). They do not affect each other, but how they move has something to do with the foundation and area of your building (parent). Relative positioning means that objects are still stored on the first floor with the text stream, and there must be an influence between them.

(4) supplement to special circumstances

When using relative positioning and absolute positioning, there is a situation in which objects can move in the opposite direction if their positioning values are negative. As mentioned earlier, objects are arranged on different floors of a building. If an object is positioned with its back against the outermost wall at the beginning, and then locate it with a negative value, it will miraculously run out of the wall. Of course, there is no such thrilling and magical thing happening in reality. I only want to extend the above, such as for image explanation.

Thank you for reading! This is the end of this article on "sample analysis of CSS positioning attributes". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.