欢迎光临网页技术网站建设,我们用合理的价格,为客户提供优质的网页技术建站服务!

专业建站

个人建站网站_详解CSS的相对定位和绝对定位

出自:网站建设找哪家 时间:2020-08-28 01:40 点击: 【字体:

CSS的相对定位和绝对定位
凡是环境下,我们元素的position属性的值默认为static 就是没有定位,元素呈此刻正常的文档流中,,这个时候你给这个元素配置的left,right,bottom,top这些偏移属性都是没有结果的,不会生效,好比你配置一个间隔左边距偏移100px的声明:left:100px 那么这条声明不会起到任何结果。尚有z-index属性在这时也不会生效。
也就是说我们平时假如不给某元素一个position属性的声明,那么它默认的就是我上述的这种环境,不外因为有了浮动,所以凡是环境下我们还真不需要给元素配置position属性!
可是某些非凡的环境下,我们不得不消到position属性,那我们本日就讲讲position属性的relative和absolute值
首先说relative ,相对定位。
怎么领略呢?假如说我对某元素配置了相对定位,那么首先这个元素他会跟其它的元素一样,呈此刻文档流中它该呈现的位置,然后,我们可以配置它的程度或垂直偏移量,让这个元素相对付它在文档流中的位置的起始点举办移动。有一点要留意, 在利用相对定位时,就算元素被偏移了,可是他仍然占据着它没偏移前的空间。这里值得留意的一点是:偏移可不是边距,跟边距是纷歧样的。
我们先看看下图:

小我私家建站网站_详解CSS的相对定位和绝对定位


上图中有三个浮动的块,第二个块是配置了相对定位position:relative了的,这时各人看到它的位置并没有其它什么差异,跟其它两个块一样都处在正常的文档流中。
接下来我给谁人配置了position:relative的块配置一个偏移:left:50px ; top:30px 这时我们再看看结果:

小我私家建站网站_详解CSS的相对定位和绝对定位


这时我们发明第二个块针对它自己位置的起始点举办了一个偏移,可是它本来所占据的谁人位置空间依然还在(虚线框标示的处所),纵然我们把偏移量配置得再大一点,使它完全分开本来的位置,它本来位于文档流中的位置仍然会存在,不会被第三个块浮动过来填补掉。
同时,它的偏移也不会把此外块从文档流中本来的位置挤开,假如有重叠的处所它会重叠在其它文档流元素之上,而不是把它们挤开,就像图中那样,它已经包围在了第三个块之上。
我们可以配置它的z-index属性来调解它的堆叠顺序。
接下来我们来看看绝对定位:position:absolute
被配置了绝对定位的元素,在文档流中是不占据空间的,假如某元素配置了绝对定位,那么它在文档流中的位置会被删除,那这个元素到哪去了呢?它浮了起来,其实配置了相对定位relative时也会让该 元素浮起来,但它们的差异点在于,相对对定位不会删除它自己在文档流中占据的那块空间,而绝对定位则会删除去该元素在文档流中的位置,完全从文档流中抽了出来,我们可以通过z-index来配置它们的堆叠顺序 。
那么绝对定位是如何定位的呢?首先,假如它的父元素配置了除static之外的定位,好比position:relative,可能position:absolute以及position:fixed,那么它就会相对付它的父元素来定位,位置通过left , top ,right ,bottom属性来划定,假如它的父元素没有配置定位,那么就得看它父元素的父元素是否有配置定位 ,假如照旧没有就继承向更高层的祖先元素类推,总之它的定位就是相对付配置了除static定位之外的定位(好比position:relative)的第一个祖先元素,假如所有的祖先元素都没有以上三种定位中的个中一种定位,那么它就会相对付文档body来定位(并非窗口,相对付窗口定位的是fixed)
绝对定位的元素相对付谁来定位,我们就把这个"谁"叫着参照物,我们团结上面的讲授来看看下图就大白了 :

小我私家建站网站_详解CSS的相对定位和绝对定位


我们看一下在欣赏器里的结果,我们先看看没有利用绝对定位时的样子:
 

小我私家建站网站_详解CSS的相对定位和绝对定位


然后我们给第二个块配置绝对定位:position:absolute 然后再配置一个偏移:left:150px;top:40px; 这时就酿成了下图所示:

小我私家建站网站_详解CSS的相对定位和绝对定位


尚有一点就是:在配置偏移量的时候,我们可以配置负值。
好了,既然领略了相对定位和绝对定位,那我们应该怎么把它们运用到实际案例中呢?
首先我们来看看下图:

小我私家建站网站_详解CSS的相对定位和绝对定位


在上图中的去购物车结算按钮左上方有一个赤色的小块,用来显示购物车中有几件商品,各人在没学会绝对定位之前大概不知道这个赤色的小块要怎么实现,可是此刻方才学了绝对定位,这个问题就不再是问题了。
我照旧亲自来做一下吧,我们先把这个配景图片弄出来:

然后我们写HTML:
<div class="cart_btn">
 
    <span><i>155</i></span>
    <a href="dd.html" target="_blank">去购物车结算</a>
    <b></b>
 
</div>
上面HTML代码中的 span元素就是谁人用来显示购物车中商品数量的小红块,a元素中是文字描写,b元素是最右边的小三角。
我们来看一下CSS代码:
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px solid #eee;padding-left:30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn span{background:url(../images/picA.png) no-repeat -36px -54px;padding-left:7px;position:absolute; top:-12px;left:20px;}
.cart_btn span i{float:left;height:20px;background:url(../images/picA.png) no-repeat right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color:transparent transparent transparent #CCCCCC;border-style:dashed dashed dashed solid;border-width:5px;height: 0;overflow: hidden;width: 0;}
上面CSS代码中我们把购物车图标作为.cart_btn的配景,这里我们发明一个问题,就是那一张图片上有三个图标,各人也发明白,我三个用到图标的元素都是用这一张图片做配景,可是显示的却纷歧样,这里就用到了我们前面讲过的配景定位问题,不会的伴侣可认去看看前面的第十一讲:css配景属性background具体讲授-利用配景图片
CSS中的内容是什么意思这里就不讲了,要讲的话就跑题了,这些都是根基的对象,除了谁人CSS三角形之外,其它的假如都还不会,那你必定没有好悦今朝面的文章。再说你实在不懂的话也可以去查一查参考手册
最后我们来看看欣赏器里的结果:
微信扫一扫
| 推广合作:常州零动壹号文化传媒有限公司 专业建站- 提供网页技术网站建设、网页技术手机网站、网页技术网站仿制仿站等建站服务
13699789890