Summary on Positioning in CSS

There are four types of positioning in CSS, which have different effects in different scenarios. Here I will briefly introduce these four types of positioning.

Static positioning: There are not many application scenarios, so we will not introduce them here.

The following mainly introduces three other common positioning

1. position: relative positioning: As the name implies, relative positioning is to make corresponding changes relative to the original position. It should be noted that the element will occupy the original position after moving (this is the most important point of relative positioning)

The following is the code demonstration part:

<style>
        * {
            margin: 0;
            padding: 0;
            /* Clear all margins and padding here,
            No real meaning, just for convenience of observation*/
        }
        
        .pink {
            width: 80px;
            height: 80px;
            background-color: pink;
        }
        
        .purple {
            width: 80px;
            height: 80px;
            background-color: purple;
        }
        
        .green {
            width: 80px;
            height: 80px;
            background-color: greenyellow
        }
    </style>

Here three divs are defined and given corresponding colors. The running results are as follows

When the child box is given the following positioning attributes

 .purple {
            position: relative;
            top: 0;
            left: 80px;
            /* Relative positioning is added to this box above,
            And move it 80px relative to its original self*/
            width: 80px;
            height: 80px;
            background-color: purple;
        } 

The page becomes like this, which also verifies the most important point - the element will occupy the original position after moving, otherwise the green box will be on top

2.Position:absolute absolute positioning: Absolute positioning is the position change made by its own parent element. If the parent element has a position attribute, the corresponding movement is made based on the parent element. If the parent element does not have a position attribute (or there is no parent element), the corresponding movement is made based on the browser. It should be noted that the element will not occupy the original position after moving.
The following is a code demonstration

.purple {
            position: absolute;
            top: 160;
            left: 80px;
            /* The purple box here has no parent element so it is positioned based on the browser*/
            width: 80px;
            height: 80px;
            background-color: purple;
        } 

Obviously the green box is pushed up, and this result verifies absolute positioning: the element will not occupy the original position after moving.

3. Fixed positioning: The position of fixed positioning is relative to the entire page, regardless of whether there is a parent element. Similarly, fixed positioning will not retain the position

Summarize

This concludes this article about the summary of positioning in CSS. For more content related to positioning in CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!