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

This article mainly introduces the relevant knowledge of CSS relative and absolute positioning case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this CSS relative and absolute positioning case analysis article. Let's take a look.

1. Absolute positioning and floating elements are close relatives: both encapsulated and destructive

Wrapping: to put it another way is to make the element inline- block. for example, the default width of a div tag is 100%, but once entangled with the absolute attribute, the default width becomes the width of the adaptive inner element.

Destructive: the destruction of the float is that it cuts off the linebox chain, causing a high degree of collapse, but because the floating element is still in the DOMtree, the entity is visible and tangible, so it still occupies a physical position. The absolute positioning of absolute not only makes the height collapse, but also because it has never gone deep into the mortal world, where there is no physical position of him, so the width is also collapsed.

Abuse of 2.position:absolute

First of all, I am a fluid layout control, absolutely positioning this kind of thing, there is obviously no fluid temperament, especially after positioning (although sometimes there is a certain degree of mobility under the protection of relative). The liquidity layout emphasizes variable width, uncertain height, active use of the label's own attributes, let nature take its course, and least intervention. However, due to the destructiveness of the absolute attribute (especially with the left/ top value), it will cause the height to collapse, so, as a last resort, it is necessary to set a height value (or a value sufficient to support the height). For example, Sina Weibo navigation is absolute positioning, so the outer navigation label must be set high, otherwise, the following elements will overlap.

3. Alternative implementation of common absolute layout

It is easy to assume that the value of absolute is positioned with the help of the left/top attribute. To put it loosely, it is estimated that more than 90% of the absolute attributes in ordinary layouts are used for positioning. Well, let's go back to this, but let's take a look at how some common absolute layouts achieve the same layout effect by using other properties. Since the absolute attribute is used for positioning, all we have to do is use other attributes to locate. At this point, it is natural to think of another more low-key and omnipotent positioning attribute in CSS, margin. The first two examples below use margin instead of absolute and related attributes.

First of all, take an example of a pricing style on the home page of JD.com Mall. See the screenshot below:

When you look at its code implementation with a small bug, it is sure enough that it is an absolute positioning + positioning attribute.

If I were to implement it, I would not use the absolute attribute, but would use margin to implement a layout that is more scalable and fault-tolerant

Because the price is a div that occupies the whole line and the position is always the same as that of the phone in the horizontal direction, as long as you set a fixed margin, you can ensure that it can be well displayed regardless of the width of the parent container or the way of positioning. At the same time, changing the div tag outside the list price to the tag of the inline horizontal element is convenient for inline- blockization (when the position attribute or float attribute is set for the element in the line, the attribute becomes inline-block by default. So you can set width and height. Span is an inline element, and it is impossible to set width and height without setting display= "block" or "inline-block")

4.absolute can fight alone.

We need to realize that the element of an application's position:absolute is actually just a very common element. I feel that the only difference between an application and an float:left is the lack of width.

After clicking the button, you can find that the picture is still that picture, still in that position, still so quiet and elegant. The only thing that has changed is that some of the words have gone below it (missing width)

Thus it can be seen that the absolute attribute is just a very common attribute and is closely related to float:left. One is a demon falling to earth, and the other is a demon in the sky. So, very often, when we use absolute in a general layout, we just need to set a position:absolute. As for things like left/top, they are floating clouds. When it comes to positioning, we treat this element as an ordinary element and use margin to locate it.

This is the end of the article on "CSS relative and absolute positioning case analysis". Thank you for reading! I believe you all have a certain understanding of the knowledge of "CSS relative and absolute positioning case analysis". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.