Position interpretieren

Position bedeutet wörtlich „Position“, was bedeutet, dass es in HTML vier Attribute gibt: „Statisch“ ist der Standardeffekt. Es gibt keine spezielle Einstellung, die die hierarchische Klassifizierung nicht vorsieht über Z-Index durchgeführt werden.

absolut (absolute Positionierung)

Absolut (absolute Positionierung) löst sich nicht nur vom Textfluss, sondern lässt auch keinen exklusiven Raum für dieses absolut positionierte Element im Textfluss. Das ist wie eine Stelle in einer Fabrik, wenn ein Arbeiter die Stelle verlässt, werden natürlich andere Arbeiter die Stelle besetzen. Der Teil, der sich auf natürliche Weise herausbewegt, wird zu einem freien Körper. Durch die absolute Positionierung können Sie Elemente über TRBL (TOP, RIGHT, BOTTOM, LEFT, kurz TRBL) so einstellen, dass sie sich in jeder Position befinden. Wenn das Positionsattribut der übergeordneten Ebene der Standardwert ist, beginnt der Koordinatenursprung von TRBL am Koordinatenursprung des Körpers.

　relativ (relative Positionierung) kann die Position im Textfluss nur nach oben, unten, links und rechts verschieben, obwohl sein Präsentationsbereich vom Textfluss getrennt ist ist immer noch im Textfluss, das ist wie bei einem Wanderarbeiter, der an einen anderen Ort geht, aber immer noch einen exklusiven Platz für ihn in seiner Heimatstadt hat, und dieser Ort ändert sich mit seiner Bewegung nicht. Dadurch bleibt offensichtlich ein Leerraum übrig. Wenn Sie möchten, dass der Textfluss diesen Teil verwirft, müssen Sie die absolute Positionierung verwenden.

　

fixed (feste Positionierung)Erzeugt ein festes Positionierungselement, das relativ zum Browserfenster positioniert ist. Die Position des
-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Als nächstes werde ich am Beispiel von „Three Kingdoms Kill“ ausführlich über die Anwendung von Position sprechen:

　　
    
        
        
    
    
        

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

                        
                    

                    
                    

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            
                

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                    
            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            

                    

                    

                    

                    

                    
                    

                        < li id="c4">
                                        
• 
                      
                     <                                      
• 
  

                        
• 
                          

                        
• 
  🎜>                    

                    

            

                
        

            
            
                
        < ;/div>
                    
            
            
           < ;img src="image/vhongtao.png" class="k4"/>
                
            
                
            
        

            

< ;/div>
            

            

            

急< br />救

            

青
囊

            

class="x1"

            

class="x2"

        

    

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn