BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5レイヤーオーバーレイの実装

2022-01-12 11:57:15

位置の構文です。
position : 静的絶対相対

位置パラメータを指定します。

  • static : 特別な配置はなく、オブジェクトはHTMLの配置規則に従います。
  • absolute : オブジェクトをドキュメントストリームからドラッグし、left, right, top, bottomなどのプロパティを用いて絶対的に配置します。また、そのカスケード表示は、cssのz-indexプロパティで定義される。この時点では、オブジェクトはマージンを持ちませんが、まだフィルホワイトとボーダーを持ちます。
  • relative : オブジェクトはカスケードされませんが、left, right, top, bottomなどのプロパティに基づき、通常のドキュメントフローでオフセットされます。

位置 説明
オブジェクトの位置決め方法を設定すると、レイアウトレイヤーを簡単に絶対位置決めすることができ、より正確にボックスオブジェクトを制御することができます。 

  <html>
   <head>
     <title> Layer positioning</title>
   </head>
   <style>
    div {height:300;
        width:300;
        }
    #d1 {position:absolute;               
        background-color:green;     
        left:2em;                       
        top:2em;
        }
     #d2 {position:absolute;
         background-color:blue;
         left:4em;                      
         top:4em;
         }
      #d3 {position:absolute;
          background-color:red;
          left:6em;                     
          top:6em;
          }
   </style>
   <body>
     <div id="d1">                    　　 
     <div id="d2">                 　　 
     <div id="d3">                　　  
   </body>
 </html>

今回はHTML5のレイヤー重ね合わせの実装について紹介しましたが、より関連するHTML5のレイヤー重ね合わせのコンテンツは、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後もよりスクリプトハウスを応援していただけると嬉しいです

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します