Translator: cherryvenus

The original link

In recent years, front-end engineers have been able to create complex layouts using different CSS layout techniques. Floats. Some of these techniques have a long history (floats, for example). Others have gained popularity in recent years (Flexbox, for example).

In this article, we’ll explore some little-known things about CSS positioning in more detail.

Before we dive into these things, let’s take a quick look at the types of positioning available, of course.

Location types in the CSS

The position CSS property 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 element is not located. To locate it, we need to change the predefined types. To change the predefined type, we set the property value of position to one of the following:

  • relative
  • absolute
  • fixed
  • sticky

Only when this is set can we use the offset argument to specify the desired position for our element:

  • top
  • right
  • bottom
  • left
  • The initial value of these properties is the keyword “auto”

We need to remember that when an element’s position is set to absolute or fixed, we call it an absolute positioning element. Also, note that a positioned element can specify its stack order using the Z-index attribute.

The main differences of CSS positioning types

Now, let’s briefly discuss three key differences between these positioning types:

  • An -_ absolute _ positioned element is completely out of the normal flow. A neighboring sibling node element takes its place.

  • Elements that are _ relative or _ sticky retain their positions. Neighboring elements do not occupy the space reserved for this element. However, the offsets of this element do not take up space. They completely ignore other elements, so it may overlap with other elements.

  • A fixed _ location element (remember: fixed is a subclass of absolute location) is often relative to the location of the view (except for a parent element with a transform attribute, which is supported by the latest versions of desktop browsers).

  • A sticky positioning element is relative to the nearest slippable parent element (e.g., overflow:auto). If there is no such parent, it is positioned relative to the view.

In the following examples, we’ll explore how these types of positioning work:

Check out the Pen positioning overview by George (@Georgemarts) at CodePen.

Note: The sticky positioning type is still considered an experimental technology,And browser support is limitedOf course, you can add methods to unsupported browsers if you want. Given his limited support, we won’t mention this attribute in future articles.

A positioning element of absolute positioning type

I’m sure many of you already know how absolute positioning works. However, this type of positioning is tricky and can easily confuse novice designers.

For this reason, I decided to include it in this article on a list of lesser-known concepts (including examples).

Thus, an element whose positioning type is set to absolute positioning is its nearest parent element. Of course, this only works if the positioning type is not ‘Staic’. With this in mind, if the element does not have any positioned parent, then it is positioned relative to the view.

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

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

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

However, we position the parent element relatively (for example, an element whose class is jumbotron). As soon as we change the positioning type of the parent element, notice how the positioning of the green box changes.

The element of absolute positioning is ignoredfloatThis attribute

If an element is floating left or right, and we set the positioning type to ‘absolute’ or ‘fixed’, 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:

See Pen absolutely positioned element ignoring float by George (@GeorgemArts) on CodePen.

In this example, we define two different elements as float:right. Note that the red box becomes an absolutely positioned element, ignoring the float property, whereas the relatively positioned green box retains its float value.

Inline elements, if set to absolute positioning, behave like block-level elements

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

Here’s an example:

Take a look at the Pen inline element if it is set to absolute positioning, then it behaves like a block-level element by George (@GeorgemArts) on CodePen.

In this example, we define two different elements. The first (e.g., green box) is a block-level element (e.g., div). The second (e.g., red box) is an inline element (e.g., span). Note that only the green boxes are shown.

The red box is missing because we gave it the width and height attributes, which can only be used for block-level elements and inline elements. Additionally, this is an empty element (without any child elements such as text nodes). Width and height can only be used on block-level elements, not inline elements

Remember that if we set the positioning type to absolute or fixed, the element behaves like a block-level element.

Margins don’t merge on perfectly positioned elements

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

Just like a margin on a floating element, the margin of an absolutely positioned element does not merge with other margins.

Consider the following example:

Note that Pen margins won’t merge by George (@GeorgemArts) on CodePen on absolutely positioned elements.

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

But how do we prevent margin merging? Of course, we need to put something to separate them.

For example, have a little 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 percentages

Have you used percentages instead of PX to define offsets of positioned elements? If the answer is yes, you may find that the coordinate values are computed differently from the CSS units you chose (such as PX or percentage).

This seems a little confusing, right? So let me take a look at the offsets that are declared as percentages in the specification.

The offset is the percentage that contains the width (for left or right) or height (for top and bottom) of the box. For stick-positioned elements, the offset is the percentage of the width at the bottom (for left or right) or the 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 up and down offsets) of the parent element.

The following example illustrates the difference: see Pen using PX and percentages to locate elements by George (@GeorgemArts) on CodePen.

In this example, we move elements with px and percentages. Obviously, when the offset is PX, the element moves as expected. Fast and good.

In contrast, when we use percentages as CSS units, elements are positioned according to the size of their parent element. Here’s a useful visualization that shows you how the new position (in percentage) is calculated.

Note: as you already know,transformAttributes (accompanied by differenttranslateMethod) also allows us to change the position of elements. However, remember that if we use percentages as CSS units, the element is positioned relative to its size and not relative to its parent (unlike offsets).

conclusion

I hope this article has helped you get a firm grip on CSS placement and highlighted some CSS concepts that might be confusing. I love it when you share your thoughts, questions or suggestions in the comments below. Thank you for reading.

PS: The first time to translate technical articles, I hope to help you.