Positionnement relatif et positionnement absolu en HTML

Parlons du positionnement relatif et du positionnement absolu en html Certains étudiants back-end ne sont pas familiers avec le positionnement relatif et le positionnement absolu du html. Voici le bonus, cet article parle du positionnement relatif et du positionnement absolu du html de manière très détaillée !

html est tout l'espace du document, body est l'espace du document en html, la différence entre le corps et le html est d'environ 9 cm

Positionnement relatif en position : relatif

Positionnement absolu en position : absolu

Positionnement relatif :

Quand il n'y a pas objet de référence, le positionnement relatif est relatif au positionnement du corps

Positionnement absolu :

Lorsqu'il n'y a pas d'objet de référence, le positionnement absolu est relatif au html positionnement Lorsque

utilise la marge, il occupe l'espace du document. Il est généralement utilisé en positionnement relatif. Lorsque

utilise le haut, la gauche, la droite et le bouton, il n'occupe pas l'espace du document. . , utilisez-le en fonction de la situation

Nous appliquons généralement l'absolu dans le relatif pour développer le projet

               #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>

Ce qui précède est le code html qui combine relatif et absolu. contenu de cet article, j’espère qu’il pourra aider tout le monde !

Recommandations associées :

Comment utiliser le chemin absolu et le chemin relatif du HTML

Conditions applicables pour le positionnement relatif ou le positionnement absolu

Explication détaillée du code de huit façons d'obtenir le centrage avec le positionnement absolu CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!