ホームページ  >  記事  >  ウェブフロントエンド  >  位置を解釈する

位置を解釈する

WBOY
WBOYオリジナル
2016-09-08 08:29:161917ブラウズ

まず第一に、Position は文字通り位置を意味し、HTML での位置を意味します。 static は静的で、デフォルトの効果に従い、z を介して階層的なグレーディングを行うことはできません。 -索引。

absolute(絶対測位)

Absolute (絶対配置) は、テキスト フローから切り離されるだけでなく、テキスト フロー内にこの絶対配置要素のための排他的なスペースを残しません。これは工場でのポジションに似ており、従業員が退職すると、他の従業員が自然にそのポジションを補充します。自然に外に出た部分はフリーボディになります。絶対配置を使用すると、TRBL (略して TOP、RIGHT、BOTTOM、LEFT、TRBL) を介して要素を任意の位置に設定できるようになります。親レイヤーのpositionプロパティがデフォルト値の場合、TRBLの座標原点はボディの座標原点から始まります。

relative(相対配置)は、テキストフロー内で位置を上下左右に移動することしかできませんが、その表示領域はテキストフロー内に確保されています。出稼ぎ労働者として、彼は他の場所に引っ越しましたが、故郷にはまだ自分専用の場所があり、この場所は彼の移動によって変わることはありません。これにより、明らかに空白が残ります。テキスト フローでこの部分を破棄したい場合は、絶対配置を使用する必要があります。

fixed(固定位置)
ブラウザウィンドウを基準にして配置された、固定位置の要素を生成します。
要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

次に、「Three Kingdoms Kill」の例を使用して、ポジションの適用について詳しく説明します。



三国杀

    
    
        


            

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

                        
                    

                    
                    

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

            
                

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


                

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


            

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

                    
            

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


            

                    

                    

                    

                    













  • 4









    



    

    



< ;div class="yy">




    < ;div class="jn2">青

    class="x1"

    class="x2"


        

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事:CSSPosition の配置次の記事:CSSPosition の配置

    関連記事

    続きを見る