Web—12-详解CSS的相对定位和绝对定位
|
<div class="markdown-here-wrapper" data-md-url="https://i.cnblogs.com/EditPosts.aspx?opt=1"> <p style="margin: 0px 0px 1.2em !important">上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。接下来我给那个设置了position:relative的块设置一个偏移：left:50px ; top:30px 这时我们再看看效果：<img style="width: 528px" alt="" data-media-type="image" data-attr-org-src-id="0CE7906C74AD4BC5ADBCEA42C58F292C"> <p style="margin: 0px 0px 1.2em !important">这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。我们可以设置它的z-index属性来调整它的堆叠顺序。接下来我们来看看绝对定位：position:absolute被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该 元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left,top,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）绝对定位的元素相对于谁来定位，我们就把这个”谁”叫着参照物，我们结合上面的讲解来看看下图就明白了 ：<img style="width: 600px" alt="" data-media-type="image" data-attr-org-src-id="077BC32FECC8405D95E483EA46B36942"> <p style="margin: 0px 0px 1.2em !important">我们看一下在浏览器里的效果，我们先看看没有使用绝对定位时的样子： <p style="margin: 0px 0px 1.2em !important"><img style="width: 600px" alt="" data-media-type="image" data-attr-org-src-id="F86B005349B64F099FB0DD8160C4CABC"> <p style="margin: 0px 0px 1.2em !important">然后我们给第二个块设置绝对定位：position:absolute 然后再设置一个偏移：left:150px;top:40px; 这时就变成了下图所示：<img style="width: 600px" alt="" data-media-type="image" data-attr-org-src-id="8F6D26A871FD4F069BA93213C0118D58"> <p style="margin: 0px 0px 1.2em !important">还有一点就是：在设置偏移量的时候，我们可以设置负值。好了，既然理解了相对定位和绝对定位，那我们应该怎么把它们运用到实际案例中呢？首先我们来看看下图：<img style="width: 146px" alt="" data-media-type="image" data-attr-org-src-id="07BCBA4C65064BD88F808D0F62566A81"> <p style="margin: 0px 0px 1.2em !important">在上图中的去购物车结算按钮左上方有一个红色的小块，用来显示购物车中有几件商品，大家在没学会绝对定位之前可能不知道这个红色的小块要怎么实现，但是现在刚刚学了绝对定位，这个问题就不再是问题了。我还是亲自来做一下吧，我们先把这个背景图片弄出来：<img style="width: 43px" alt="" data-media-type="image" data-attr-org-src-id="C2AD6AFC95C34E33AB9CAFB492DAEB0E"> <p style="margin: 0px 0px 1.2em !important">然后我们写HTML: <div class="cart_btn">
上面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的背景，这里我们发现一个问题，就是那一张图片上有三个图标，大家也发现了，我三个用到图标的元素都是用这一张图片做背景，但是显示的却不一样，这里是用到了背景定位问题。最后我们来看看浏览器里的效果： （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |