About the CSS positioning problem you need to pay attention to some of the pits

A list of location types in CSS
Position this CSS property allows us to specify the location type of the element.

CSS positioning options
Static is the default value for this property. At this point, we say that the element is not positioned. To position it, we need to change the predefined type. To change the predefined type, we set the Position property value to one of the following:

Relative
Absolute
Fixed
Sticky
Only after setting, can we use the offset parameter to specify the location we want for our element:

Top
Right
Bottom
Left
The initial values for these properties are 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 use the Z-index attribute to specify his stacking order.
Key differences in CSS positioning types
Now, let's briefly discuss the three key differences between these types of positioning:
One-absolutely positioned element is completely out of normal flow. The neighboring sibling node element will occupy its seat.
A relative or viscous positioned element retains their position. Adjacent elements do not occupy the space reserved for this element. However, the offset of this element (offsets) does not occupy space. They completely ignore the other elements, so this may overlap with other elements.
An absolute (fixed) positioned element (remember that fixed is a subclass of absolute positioning) often relative to the location of the view (except for a parent element with a transform attribute, the latest version of the desktop browser supports this behavior).
A sticky positioning element is relative to the nearest sliding parent element (for example, Overflow:auto). If there is no such parent element, it is positioned relative to the view.
In the next case, we'll explore how these types of positioning work:

Look at the pen positioning overview by George (@georgemarts) on Codepen.

Note: The viscous positioning type is still considered to be an experimental technique, and the browser support is limited. Of course, if you want, you can add the method to an unsupported browser. Given his limited support, we will not mention this attribute in the next article.
positioning elements of an absolute positioning type
I believe many of you already know how absolute positioning is achieved. However, this type of positioning is tricky and easily confusing to novice designers.

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

Therefore, an element that is set to be absolutely positioned is relative to its nearest parent element. Of course, this is only valid if the location type is not ' Staic '. With this in mind, if the element does not have any parent element to locate, it is positioned relative to the view.

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

Look at the pen. The positioning element of an absolute positioning type is on Codepen by George (@georgemarts).

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

However, we relative position the parent element (for example, an element with a class of Jumbotron). As long as we change the location type of his parent element, notice how the green box positioning is changed.

The absolutely positioned element ignores the float property.

If an element is floating left or right, and we set the location type to ' absolute ' or ' fixed ', the float property is set to ' none '. On the other hand, if we set the location type to relative, then the element still contains the floating property.
Look at a related example:
Look at the element that the pen absolutely positioned ignores the float this property by George (@georgemarts) on Codepen.

In this example, we define two different elements as float:right. Note that the hot box becomes an absolutely positioned element, which ignores the float property, whereas the relative positioning of the green box retains the value of his float.

if the inline element is set to absolute positioning, then he will show the feature of the block level element

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

Here's an example:

Look at the pen inline element if it is set to absolute positioning, then he will show the feature of Block-level elements by George (@georgemarts) on Codepen.

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

The red box does not appear temporarily, because we give it the width and height of these two properties, this property can only be used for block-level elements and inline elements. Plus, this is an empty element (not including any child elements such as text nodes). PS: I don't know if it's wrong here. The wide-high attribute can only be used for block-level elements, on inline elements, without effect

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

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

Here's an example:

Look at the pen inline element if it is set to absolute positioning, then he will show the feature of Block-level elements by George (@georgemarts) on Codepen.

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

The red box does not appear temporarily, because we give it the width and height of these two properties, this property can only be used for block-level elements and inline elements. Plus, this is an empty element (not including any child elements such as text nodes). PS: I don't know if it's wrong here. The wide-high attribute can only be used for block-level elements, on inline elements, without effect

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

The outer margin (margins) is not merged on an absolutely positioned element

By default, when two vertical margins are in contact with each other, the spacing between them gets two larger margins between them. This behavior can be understood as an outer-margin merger.

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

Consider the following example:

Look at the pen outer margin (margins) does not merge by George (@georgemarts) on Codepen on an absolutely positioned element.

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

However, how do we prevent the outer space from merging. Of course, we need to put something aside to separate them.

For example, for instance, there is a bit of padding or a border (we can use this rule for parent elements or child elements). Another option is to add the Clearfix class (in my case) to the parent element.

positioning elements with px and percent
Do you define the offset (offsets) of the positioning element using a percentage rather than PX? If the answer is yes, you may find that the value of the coordinates is different from the CSS unit you choose (such as PX or percent).
This looks a little confusing, isn't it? So let me take a look at the offsets in the specification that are declared as percentages.

The offset is the percentage that contains the width of the box (for left or right) or the height (for top and bottom). For an adhesive-positioned element, the offset is the width of 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 target element's positioning depends on the parent element's width (for the left and right offsets) and the high (for the top and bottom offsets).

The following example illustrates the difference: take a look at the pen with PX and percentage positioning elements by George (@georgemarts) on Codepen.

In this example, we move the elements in px and percent. Obviously, when the offset is PX, the elements move in the way we expect. It's fast and good.

Instead, when we use a percentage as a CSS unit, the element is positioned according to the size of its parent element. Here's a useful visualization that tells you how the new location (in percent) is calculated.

Note: You also have to know that the transform attribute (along with the different translate methods) also allows us to change the position of the element. However, keep in mind that if we use a percentage as a CSS unit, the element will be positioned relative to his dimension and not positioned relative to the parent element dimension (and offset (offsets)).

Conclusion
I hope this article will help you firmly grasp the CSS positioning layout and highlight some of the CSS concepts that may be confusing. I like you to share your thoughts, questions or suggestions in the comments below. Thank you for your reading.