HTMLの相対位置と絶対位置

html の相対配置と絶対配置について話しましょう。バックエンドの学生の中には、htmlの相対配置と絶対配置に慣れていない人もいます。この記事は、htmlの相対配置と絶対配置についてです。 . 絶対位置決めについて詳しく解説！

htmlはドキュメント空間全体、bodyはhtml内のドキュメント空間、bodyとhtmlの差は約9cmです

位置における相対位置:相対

位置における絶対位置:絶対

相対配置:

参照オブジェクトがない場合、相対配置は本体の配置を基準とします

絶対配置:

参照オブジェクトがない場合、絶対配置はHTMLの配置を基準とします

使用方法 マージンを使用する場合は、通常、相対配​​置に使用されます。上、左、右、ボタンを使用する場合は、相対配置に使用されます。 . ぜひプロジェクトを開発してください

               #divAddress{
                    position: relative;
                    margin-top: 48px;//这就是刚才提的当使用margin的时候才能进行下面的相对
                    width: 370px;
                    height: 66px;
                    border-bottom: 1px #c1c1c1 solid;
                }
                #img1{
                    position: absolute;
                    float: left;margin-top:2px;
                    width: 24px; height: 24px;
                }
                .address{
                    position: absolute;
                    margin-left: 34px;
                    font-size: 20px;
                    color: #c1c1c1;
                }

               #peoplePost1{
                    position: relative;
                    margin-top: 12px;
                    width: 370px;
                    height: 40px;
                    border-bottom: 1px #c1c1c1 solid;
                }
                #people1{
                    position: absolute;
                    float: left;margin-top:2px;
                    width: 24px; height: 24px;
                }
                .people2{
                    position: absolute;
                    margin-left: 34px;
                    font-size: 20px;
                    color: #c1c1c1;
                }
                #post1{
                    position: absolute;
                    float: left;margin-top:2px;margin-left:192px;
                    width: 24px; height: 24px;
                }
                .post2{
                    position: absolute;
                    margin-left: 222px;
                    font-size: 20px;
                    color: #c1c1c1;
                }

               <div id="divAddress">
                    <img id="img1" alt="address" src="<%=request.getContextPath()%>/images/address.png">
                    <div class="address">地址 ： <span style="font-weight: 600;color: black;">输入上海市卢湾区卢湾榜路758弄10号1011室</span></div>
                </div>

               <div id="peoplePost1">
                    <img id="people1" alt="people" src="<%=request.getContextPath()%>/images/people.png">
                    <div class="people2">联系人 : <span style="font-weight: 600;color: black;">张三</span></div>
                    <img id="post1" alt="post" src="<%=request.getContextPath()%>/images/post.png">
                    <div class="post2">职位 : <span style="font-weight: 600;color: black;">业务经理</span></div>
                </div>

以上がこの記事の内容です。

関連する推奨事項:

HTML で絶対パスと相対パスを使用する方法

相対配置または絶対配置に適用される条件

CSS の絶対配置 コードのセンタリングを実現する 8 つの方法の詳細説明

以上がHTMLの相対位置と絶対位置の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。