Relative positioning and absolute positioning in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Relative positioning and absolute positioning in html

韦小宝

Dec 01, 2017 am 11:00 AM

html relatively absolute

Let’s talk about relative positioning and absolute positioning in html. Some back-end students are not familiar with the relative positioning and absolute positioning of html. Here comes the bonus, this article talks about the relative positioning and absolute positioning of html in detail!

html is the entire document space, body is the document space in html, the difference between body and html is about 9cm

Relative positioning in postion: relative

Absolute positioning in postion: absolute

Relative positioning:

When there is no reference object , relative positioning is relative to body positioning

Absolute positioning:

When there is no reference object, absolute positioning is relative to html positioning

When using margin, it takes up document space. It is generally used in relative positioning.

When using top, left, right, button, it does not occupy document space. , use it depending on the situation

We usually use absolute within relative to develop the project

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

Copy after login

The above is the html code that combines relative and absolute. The above is all the content of this article. I hope It can help everyone!

Related recommendations:

#How to use the absolute path and relative path of html

Applicable conditions for relative positioning or absolute positioning

Detailed code explanation of eight ways to achieve centering with css absolute positioning

The above is the detailed content of Relative positioning and absolute positioning in html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn