Interpret Position

First of all, Position literally means position, which means positioning in HTML. It has four attributes: static is static and the default effect. There is no special setting and it follows the basic positioning regulations. Hierarchical grading cannot be done via z-index.

absolute (absolute positioning)

Absolute (absolute positioning) not only breaks away from the text flow, but also does not leave an exclusive space for this absolutely positioned element in the text flow. This is like a position in a factory. If a worker leaves, other workers will naturally fill the position. The part that moves out naturally becomes a free body. Absolute positioning will allow you to set elements through TRBL (TOP, RIGHT, BOTTOM, LEFT, TRBL for short) so that they are in any position. When the position property of the parent layer is the default value, the coordinate origin of TRBL starts from the coordinate origin of the body.

　relative (relative positioning) can only move the position up, down, left, and right in the text flow. Although its presentation area is separated from the text flow, it still reserves a place for it in the text flow. This is like a As a migrant worker, he has moved to other places, but he still has a place dedicated to him in his hometown, and this place does not change with his movement. This will obviously leave a blank space. If you want the text flow to discard this part, you need to use absolute positioning.

　　fixed (fixed positioning)
Generates fixed-positioned elements, positioned relative to the browser window.
The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

Next I will use the example of "Three Kingdoms Kill" to talk about the application of Position in detail:

　　
    
        
        
    
    
        

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

                        
                    

                    
                    

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            
                

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                    
            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                
        
            

                        
            
                
        

                    
            
            
            
                
            
                
            
        

            

            

            

            

急
救

            

青
囊

            

class="x1"

            

class="x2"