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

This article mainly introduces "how to understand the positioning in CSS programming". In the daily operation, I believe many people have doubts about how to understand the positioning in CSS programming. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to understand the positioning in CSS programming". Next, please follow the editor to study!

Types of CSS box models and positioning

In order to figure out the location, you first need to understand the CSS box model. The link in the previous sentence is an article I wrote about box models in InstantShift. I explained it in detail in that article and will make a quick summary in this article.

In CSS, each element is contained in a rectangular box. Each box has a content area, which is wrapped by an inner margin, which is the border of the box, and there is an outer margin outside the border to be separated from other boxes. You can see these from the picture below.

The positioning mode specifies where a box should be in the overall layout and what effect it will have on the surrounding boxes. The positioning mode includes regular document streams, floats, and several types of position positioning elements.

The CSS position property can take five values:

Position: absolute

Position: relative

Position: fixed

Position: static

Position: inherit

I will elaborate on the first three values and briefly explain the last two values below.

Static is the default property value for position. Any element that applies position:static is in the regular document stream. Where it is and how it affects the surrounding elements are determined by the box model.

An element positioned by static ignores all values declared by the top,right,bottom,left and z-index attributes. In order for your element to use any of these attributes, you need to first apply one of these three values to its position attribute: absolute,relative,fixed

An element with a position value of inherit is the same as the inheritance value of all other attributes, and the element simply applies the same position value as the parent element.

Absolute positioning (Absolute Positioning)

Absolutely positioned elements are completely detached from the regular document stream. For the element that surrounds it, it treats the absolute positioning element as non-existent. It is as if the display property is set to none. If you want to keep the position it occupies without being filled with other elements, then you need to use other positioning methods.

You can set the position of the absolute positioning element through the top, right, bottom, and left attributes. But you usually only set up two of them, top or bottom, and left or right. By default, their values are all auto.

The key to understanding absolute positioning is to know where it starts. If top is set to 20px, then you need to know where the 20px is calculated from.

The starting point of an absolutely positioned element is relative to its parent element whose first position value is not static. If there is no qualified parent element on its parent element chain, the absolute positioning element is positioned relative to the document window. Ha!

You may be a little confused about the concept of "relative", especially when there is something called relative positioning, which we haven't talked about yet.

When you set position:absolute on an element's style, it means that the parent element needs to be considered, and if the parent element's position value is not static, then the starting point of the absolute positioning element is the upper-left corner of the parent element.

If the parent element does not have a position location other than static applied, it checks whether the parent element of the parent element has a non-static location applied. If positioning is applied to the element, the upper-left corner of the element becomes the starting point of the absolute element. If not, it continues to traverse the DOM up until a positioning element is found or the search fails to reach the outermost browser window.

Relative positioning (Relative Positioning)

Relative positioning elements also determine their position according to the four attributes top, right, bottom, and left. But only move relative to their original position. In a sense, setting relative positioning for an element is a bit similar to adding margin to an element, but there is also an important difference. The difference is that elements surrounding relative positioning elements ignore the movement of relative positioning elements.

We can think of it as a heavy image of a picture that moves a little bit from the position of the real picture. The position occupied by its original picture is still retained, but we can no longer see it, only its repetition. This allows positional overlap between elements because relative positioning elements can be moved to the space occupied by other elements.

The relative positioning element leaves the normal document flow, but still affects the elements that surround it. Those elements behave as if the relative positioning element is still in the normal document stream.

We no longer need to ask where this relative position is. Because this relative position is obviously a normal document stream. Relative positioning is a bit like adding margin to an element, but for neighboring elements it's like nothing happened. But it didn't actually add any margin.

Fixed positioning (Fixed Positioning)

The behavior of fixed positioning is similar to absolute positioning, but there are some differences.

First of all, fixed positioning is always relative to the browser window, and its location is determined by the top, right, bottom, and left properties of which properties. It abandons its parent element, and it is a little rebellious in its positioning.

The second difference is that it is inherited in name. Fixed positioning elements are fixed. They do not move as the page scrolls. You can tell the element where it is and never move again. Oh, it seems to be pretty clever.

In a sense, a fixed positioning element is a bit like a fixed background image, except that its outer container block is always a browser window. If you set a background image in body, it behaves very much like a fixed positioning element, but with slightly less precision in position.

The background image also cannot change its size in the third dimension, thus bringing the z-index attribute.

Broke the flat Z-Index.

This page is a two-dimensional plane. It has width and height. We live in a three-dimensional world with z-index as its depth. This extra dimension can cross a plane.

As you can see from the image above, the high z-index is above the low z-index and moves toward the top of the page. Instead, a low z-index moves below the high z-index and toward the bottom of the page.

Without z-index, locating elements would be a bit troublesome. Because z-index can place one location element above or below another, it may allow you to do something creative. The default z-index value for all elements is 0, and we can use negative values for z-index.

Z-index is actually more complex than I described here, but the details are written in another article. Now you just need to remember the basic concept of this extra dimension and its stacking order, and remember that only positioning elements can apply the z-index attribute.

The problem of positioning

For positioning elements, there are several common problems, all of which are worthy of our understanding.

1. You cannot apply positioning attributes and floats to the same property. Because the two instructions conflict with each other as to what positioning scheme to use. If you add both attributes to the same element, expect what you want to use in the later attribute in CSS.

2.Margin does not collapse on absolute elements. Suppose you have a paragraph with a margin-bottom of 20px. After the paragraph is a picture with a margin-top of 30px. Then the space between the paragraph and the picture will not be 50px (20px+30px) but 30px (30px > 20px). This is called margin-collapse, where two margin are merged (collapsed) into a single margin.

Absolute positioning elements do not collapse margin like that. This will make them different from what they expected.

3.IE has some BUG on Z-index. In IE 6, the select element is always at the top of the stack level, regardless of the z-index of its z-index and other elements.

IE 6 and IE 7 have another problem at the stack level. IE 6 determines which set of elements is at the top of the hierarchy by the level of the outermost positioning element, not by the level of each individual element itself.

XML/HTML Code copies content to the clipboard

For the above structure, you would expect the paragraph element to be at the top of the stack level. Because it has the highest z-index value. But in IE 6 and IE 7, the picture is at the top of the paragraph. Because img has a higher z-index level than div. So it will be above all the child elements of div.

At this point, the study on "how to understand the orientation in CSS programming" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.