Relative Positionierung und absolute Positionierung in HTML

Sprechen wir über relative Positionierung und absolute Positionierung in HTML Einige Back-End-Studenten sind mit der relativen Positionierung und absoluten Positionierung von HTML nicht vertraut. Hier kommt der Bonus: In diesem Artikel geht es ausführlich um die relative und absolute Positionierung von html!

HTML ist der gesamte Dokumentbereich, Body ist der Dokumentbereich in HTML, der Unterschied zwischen Body und HTML beträgt etwa 9 cm

Relative Positionierung in der Position: relativ

Absolute Positionierung in der Position: absolut

Relative Positionierung:

Wenn es keine gibt Referenzobjekt, relative Positionierung ist relativ zur Körperpositionierung

Absolute Positionierung:

Wenn kein Referenzobjekt vorhanden ist, ist die absolute Positionierung relativ zu HTML Positionierung Wenn

den Rand verwendet, belegt es den Dokumentbereich. Es wird im Allgemeinen bei der relativen Positionierung verwendet. Wenn

oben, links, rechts und die Schaltfläche verwendet, belegt es keinen Dokumentbereich ., verwenden Sie es je nach Situation

Wir verwenden normalerweise absolute innerhalb von relative, um das Projekt zu entwickeln

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

Das Obige ist der HTML-Code, der Relativ und Absolut kombiniert Inhalt dieses Artikels, ich hoffe, er kann allen helfen!

Verwandte Empfehlungen:

So verwenden Sie den absoluten und relativen Pfad von HTML

Anwendbare Bedingungen für relative Positionierung oder absolute Positionierung

Detaillierte Code-Erklärung von acht Möglichkeiten, eine Zentrierung mit CSS-Absolutpositionierung zu erreichen

Das obige ist der detaillierte Inhalt vonRelative Positionierung und absolute Positionierung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!