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

Today, I will talk to you about how to understand the Position in the CSS layout. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

People tend to use Position when it comes to CSS layouts. Positoin seems to be an easy concept to grasp. On the face of it, as long as you specify exactly where a block is located, it will be there. However, positioning is a little more complicated than when you first came into contact. Here are a few things that can trip a novice, so you need to master them before you can use them skillfully.

Once you have a deep understanding of how Position works, you can use it to do great things

Box model and Position type

In order to understand and locate your first understanding of the box model. The previous link is an article I wrote to InstantShift about box models. I made a detailed introduction there, and here I will provide a quick summary.

In CSS, each element is surrounded by a rectangular box, each element has a content area, the content area is surrounded by inner margins (padding), and the border surrounds the content area and inner margins. The outer margin is used outside the border to separate it from other boxes. You can see these in the picture below.

The positioning mode defines where a box will be placed in the overall layout and how each box affects the boxes around it. Location mode contains normal document stream, floating stream and several types of location elements.

There are five available values for the CSS positioning property

Position: absolute

Position: relative

Position: fixed

Position: static

Position: inherit

Next, I will explain the first three attributes in detail, and the last two attributes are just a brief introduction.

Static is the default value for position. Each element whose position attribute is set to static is displayed in the normal document stream. The specifications in which they are placed and displayed are defined in the box model.

An element positioned by static will ignore the values of any top, right, bottom, left, z-index attributes. In order to use any of these values, you must set the element's position property to one of absolute, relative, fixed

Inherit, like all other css attributes, the current element gets the same attribute value as the parent element.

Absolute positioning (Absolute Positioning)

Absolutely positioned elements are completely removed from the normal document stream. For the other elements that surround it, they think that the absolutely positioned element does not exist, just as if the element's display attribute 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.

When you set the location of an absolute positioning element, there are four attributes: top, right, bottom, and left, and you usually define only two of them, top or left, and left or right. Their default value is auto.

The key to understanding absolute positioning is to understand where they start. If the top value is 20px, the question is where does 20px start.

The starting point of an absolute positioning element is relative to its parent element whose first postion attribute value is not static. If the condition is not met in the parent element chain, the absolute positioning element is positioned relative to the entire document window. Ha

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

When you set position:absolute,css for an element, you will see the parent element of the element. If the parent element has been positioned (except for static), then the starting point of the absolute positioning element is the upper-left corner of the parent element.

If the parent element is not applied with positon positioning other than static, then check to see if the parent element has position positioning other than static applied. If so, the starting point of the absolute positioning element is the upper-left corner of the element. If not, continue to search the DOM tree until you find an application positioning element other than static, or fail to reach the outermost browser window.

Relative positioning (Relative Positoning)

Relative positioning is also based on top, right, bottom, and left attributes. But only move relative to their original position. This means that adding relative positioning is somewhat similar to adding outer margins. But there is also an important difference. Elements around relative positioning elements ignore the offset of relative positioning elements.

We can think of it as a heavy image of a picture that starts to move 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 it can be moved to the space occupied by other elements relative to the positioning element.

The relative positioning element is detached from the normal document flow, but it still affects the elements around it. The elements around it behave as if the relative positioning elements are still in normal flow.

We don't need to ask who is relative to locate here. The answer is always relative to the normal document stream. Relative positioning is like adding an outer margin (margin) to an element, but nothing happens to adjacent elements. No outer margins are actually added.

Fixed positioning (Fixed Positioning)

Fixed positioning is similar to absolute positioning, but there are some differences.

First of all, the fixed positioning is always relative to the browser window, and then get the top, right, bottom, left, attribute values for positioning. It is detached from its parent element, and it is a little rebellious in its positioning element.

The second difference is inherited from the name. Fixed elements are always fixed. They don't move when the page is fixed. You tell it where to fix it, and it's always there. In this way, they don't seem so rebellious.

In a sense, a fixed positioning element is a bit like a fixed positioning background image, except that its outer container is always a browser window. If you set a background image in body, it behaves very similar to a fixed positioning element. It's just that the position is not so accurate.

The background image does not change its position in the third dimension, thus bringing the z-index attribute.

Z-index, break the plane

A page is a two-bit plane, which is wide and high. We live in a three-dimensional world with z-index as its depth, and this extra dimension can cross a plane.

The high z-index value is above the low z-index value element and moves from the top of the page. Instead, the low z-index value is below the high z-index value element and moves from the bottom of the page.

Without z-index, locating elements is a bit of a hassle. With z-index, you can make something creative that allows one element to be above or below another. The default value of the z-index attribute for each element is 0, and negative values can be used.

In fact, z-index is much more complicated than I described here, but the details are written in another article. Now remember the basic concepts of this extra dimension and their stacking order. And only positioning elements can use the z-index attribute

Location problem (Positioning Issues)

Here are some common problems with positioning elements, each of which is worth knowing.

1. You cannot use both the position attribute and the float attribute on an element. Because the instructions of the two are relatively contradictory as to what kind of positioning scheme to use. If you add both attributes to the same element, expect the latter attribute in CSS to be the one you want to use.

2.Margin does not collapse on absolute positioning elements. If you have a paragraph with a bottom margin of 20px, just below this paragraph is a picture with an outer margin on 30px, and the space between the paragraph and the picture will be 50px (20px+30px) instead of 30px (30px > 20px). This is known as outer margin folding, where two outer margins are merged (folded) into one. Absolute positioning elements do not collapse margin like that, which makes them not as expected.

3.IE has some bug in z-index. In IE6, the selected element is always above the stack element, regardless of the z-index value of its z-index and other elements surrounding it.

IE6 and IE7 have other problems on the stack layer. IE6 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.

The code is as follows:

You think the paragraph will be on top of the stack because it has the highest z-index value, but in IE6 and IE7, the image will be on top of the paragraph because there appear to be two different stacking layers. One is div's and the other is image's. Image has a higher z-index than div, so it covers everything in div

Summary

Apply a positioning attribute to an element, and the performance of the element depends on the positioning mode of the CSS. You can use absolute, relative, fixed, static (default) and match values for a location element.

Positioning modes, including CSS positioning elements, define where a box is placed in the layout and how the elements next to it are affected by the positioning elements.

Z-index can be applied to positioning elements. It adds a third dimension to the page and defines the order in which elements are stacked.

The positioning property looks easy to grasp, but it works differently from what it sees on the surface. You may think that relative positioning is more like absolute positioning. You usually want to use floats in the layout and use positioning for a particular element to break the page layout.

After reading the above, do you have any further understanding of how to understand Position in the CSS layout? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.