Rumah > hujung hadapan web > html tutorial > html中相对定位与绝对定位

html中相对定位与绝对定位

韦小宝
Lepaskan: 2017-12-01 11:00:20
asal
10072 orang telah melayarinya

来讲讲html中相对定位与绝对定位,有的后端同学对html的相对定位与绝对定位,不太熟的福利来了,本篇对于html的相对定位与绝对定位讲的很详细呢!

html是整个文档空间,body是html中的文档空间, body与html相差9cm左右

postion中的相对定位:relative

postion中的绝对定位:absoute

相对定位:

当没有参照物的时候,相对定位是相对与body定位的

绝对定位:

当没有参照物额时候,绝对定位是相对与html定位的

使用margin的时候,是占用文档空间的,一般用在相对定位使用

使用top,left,right,button的时候,是不占用文档空间的,看情况使用

我们一般是在相对里面套用绝对来进行项目的开发

               #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>
Salin selepas log masuk

上面也就是相对和绝对结合的html代码,以上就是本文的所有内容了,希望可以给大家带来帮助!

相关推荐:

html的绝对路径和相对路径怎么使用

相对定位或绝对定位的适用条件

css绝对定位实现居中的八种方式代码详解

Atas ialah kandungan terperinci html中相对定位与绝对定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan