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

This article mainly introduces what are the common problems in the use of css positioning, the article is very detailed, has a certain reference value, interested friends must read it!

A list of location types in css

The css attribute position allows us to specify the positioning type of the element.

Css positioning options

Static is the default value for this property. At this point, we say that the element has not been located. In order to locate it, we need to change the predefined type. To change the predefined type, we set the property value of position to one of the following:

Relative

Absolute

Fixed

Sticky

Only after it is set can we use the offset parameter to specify the location we want for our element:

Top

Right

Bottom

Left

The initial value of these properties is the keyword "auto"

We need to remember that when the position of an element is set to absolute or fixed, we call it an absolute positioning element. Again, note that a positioned element can use the z-index attribute to specify its stacking order.

Main differences of CSS location types

Now, let's briefly discuss three key differences between these location types:

An absolutely positioned element is completely out of the normal flow. The neighboring sibling node element will occupy its seat.

A relative or viscous positioning element retains their position. Adjacent elements do not occupy the space reserved by this element. However, the offset (offsets) of this element does not take up space. They completely ignore other elements, so this may overlap with other elements.

An absolute (fixed) positioned element (remember: fixed is a subclass of absolute positioning) is often positioned relative to the view (except for a parent element with a transform attribute, this behavior is supported in the latest version of desktop browsers).

A sticky positioning element is relative to the nearest sliding parent element (for example, overflow:auto). Without such a parent element, it is positioned relative to the view.

In the next example, we will explore how these types of positioning work:

Take a look at the Pen positioning overview by George (@ georgemarts) on CodePen.

Note: sticky positioning is still considered an experimental technology, and browser support is limited. Of course, you can add methods to unsupported browsers if you want. Given his limited support, we will not mention this attribute in the next article.

Positioning elements of absolute positioning type

I'm sure many of you already know how absolute positioning is achieved. However, this type of positioning requires skill and is easy to confuse novice designers.

For this reason, I decided to include this in the list of little-known concepts (including corresponding examples), which is included in this article.

Therefore, an element whose positioning type is set to absolute positioning is relative to its nearest parent element. Of course, this is only valid if the positioning type is not 'staic'. With this in mind, if the element does not have any positioning parent, it is positioned relative to the view.

To explain this behavior, take a look at the following online example:

Take a look at the location element by George (@ georgemarts) of the Pen absolute positioning type on CodePen.

In this example, we give the green box an initial absolute positioning type and set its offset (offsets) to bottom:0 and left:0. In addition, we do not need to give a specific positioning type to the direct parent element (red box).

However, we relatively locate the parent element (for example, an element whose class is jumbotron). As long as we change the positioning type of his parent element, notice how the positioning of the green box is changed.

The absolutely positioned element ignores the attribute float

If an element is floating left or right, and we set this positioning type to 'absolute' or' fixed', then the property of float will be set to 'none'. On the other hand, if we set the positioning type to relative, the element still contains floating attributes.

Look at a related example:

Take a look at the Pen absolute positioning element that ignores the float attribute by George (@ georgemarts) on CodePen.

In this example, we define two different elements as float:right. Notice that when the red box becomes an absolute positioning element, this ignores the float attribute, while the relatively positioned green box retains its float value.

If an inline element is set to absolute positioning, it will show the characteristics of a block-level element.

An inline element, if its position is set to absolute or fixed, then it has attributes of block-level elements. This table summarizes what types of elements are converted to block-level elements.

Here's an example:

If the Pen inline element is set to absolute positioning, it will show the block-level element feature by George (@ georgemarts) on the CodePen.

In this example, we define two different elements. The first (for example, green box) is a block-level element (for example, div). The second (for example, red box) is an inline element (such as span). Note that only the green box is displayed.

The red box does not appear for the time being, because we give it these two attributes of width and height, which can only be used for block-level and inline elements. In addition, this is an empty element (does not contain any child elements such as text nodes). Translator ps: I don't know if there is a mistake here. Width and height attributes can only be used for block-level elements, but not for inline elements.

Remember that if we set the positioning type to absolute or fixed, the element will present the properties of the block-level element.

Outer margins (margins) are not merged on absolutely positioned elements

By default, when two vertical outer margins touch each other, the spacing between them achieves a larger outer margin between them. This kind of behavior can be understood as outer margin merging.

Just like the outer margin on a floating element, the outer margin of an absolute positioning element is not merged with other outer margins.

Consider the following example:

Take a look at the Pen outer margin (margins) does not merge by George (@ georgemarts) on CodePen on absolutely positioned elements.

In this example, the outer margin of the original element is equal to 20px. In addition, his top outer margin overlaps with the parent element's top outer margin, which is also 20px. As you can see, only when we absolutely position the element, the top margin does not overlap with the relative margin of the parent element.

But how can we prevent outmargins from merging? Of course, we need to put something to separate them.

For example, for example, there is a bit of an inner margin or border (we can apply this rule to parent or child elements). Another option is to add the clearfix class (in my case) to the parent element.

Locate elements with px and percentage

Have you ever used percentages instead of px to define the offset (offsets) of positioning elements? If the answer is yes, you may find that the calculation of the coordinate values is not the same as the CSS unit you choose (such as px or percentage).

It looks a little confusing, doesn't it? So let me take a look at the offset declared as a percentage in the specification.

The offset is a percentage of the width (for left or right) or height (for top and bottom) of the containing box. For adhesion-positioned elements, the offset is the width of the bottom (for left or right) or the percentage of height (for top and bottom). Negative values are also allowed.

That is, as long as we define the offset as a percentage, the positioning of the target element depends on the width (for left and right offsets) and height (for upper and lower offsets) of the parent element.

The following example illustrates the difference: take a look at Pen using px and percentage positioning element by George (@ georgemarts) on CodePen.

In this example, we use px and percentage to move the element. Obviously, when the offset is px, the element moves as we expect. Fast and good.

On the contrary, when we use a percentage as a css unit, the element is positioned according to the size of its parent element. Here is a useful visualization that tells you how the new location (as a percentage) is calculated.

5 things you need to know about css location

Note: as you already know, the transform attribute (along with different translate methods) also allows us to change the position of the element. However, keep in mind that if we use a percentage as the css unit, the element is positioned relative to its size and not relative to the parent element size (different from the offset (offsets)).

The above is all the content of the article "what are the common questions in the use of css positioning". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.