HTML의 상대 위치 지정 및 절대 위치 지정

html의 상대 위치 지정과 절대 위치 지정에 대해 이야기해 보겠습니다. 일부 백엔드 학생들은 html의 상대 위치 지정과 절대 위치 지정에 대해 잘 알지 못합니다. . 절대 위치 지정에 대해 자세히 설명되어 있습니다! html은 전체 문서 공간이고, body는 html의 문서 공간이며, body와 html의 차이는 약 9cm입니다.

위치의 상대 위치: 상대

위치의 절대 위치: 절대

상대 위치 지정:

참조 개체가 없는 경우 상대 위치 지정은 신체 위치 지정을 기준으로 합니다.

절대 위치 지정:

참조 개체가 없는 경우 절대 위치 지정은 html 위치 지정을 기준으로 합니다.

사용 여백을 사용할 경우 문서 공간을 차지합니다. 일반적으로 위쪽, 왼쪽, 오른쪽 및 버튼을 사용할 경우 문서 공간을 차지하지 않습니다. positioning. 와서 프로젝트를 개발하세요

               #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 코드입니다. 위 내용이 모든 사람에게 도움이 되기를 바랍니다.

관련 권장 사항:

html에서 절대 경로와 상대 경로를 사용하는 방법

상대 위치 지정 또는 절대 위치 지정에 적용 가능한 조건

Css 절대 위치 지정 센터링 코드를 달성하는 8가지 방법 자세히 설명 설명

위 내용은 HTML의 상대 위치 지정 및 절대 위치 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!