时间:2021-07-01 10:21:17 帮助过:19人阅读
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>
上面也就是相对和绝对结合的html代码,以上就是本文的所有内容了,希望可以给大家带来帮助!
相关推荐:
html的绝对路径和相对路径怎么使用
相对定位或绝对定位的适用条件
css绝对定位实现居中的八种方式代码详解
以上就是html中相对定位与绝对定位的详细内容,更多请关注Gxl网其它相关文章!