绝对定位(Absolute positioning)

gaomysion 发布于2019-08-29 12:36 / 1531人阅读

摘要：绝对定位的特性包裹性包裹性展示跟一样也具有包裹性两者的包裹性都类似于使元素化破坏性破坏性展示相对于引起父元素塌陷要更进一步上面的例子就可以看出元素完全脱离文档流并且被其它盒子以及盒子内的文本无视替代方案由于滥用会降低扩展性和维护性所以需要

绝对定位的特性 包裹性

absolute包裹性展示

跟float一样,absolute也具有包裹性,两者的包裹性都类似于使元素inline-block化.

破坏性

absolute破坏性展示

相对于float引起父元素塌陷,absolute要更进一步,上面的例子就可以看出,absolute元素完全脱离文档流,并且被其它盒子以及盒子内的文本无视

absolute替代方案

由于absolute滥用会降低扩展性和维护性,所以需要尽量少使用absolute

使用margin代替absolute为价格标签定位

通过给span标签设置一个div,设置div的margin实现

图片图标绝对定位覆盖

这个案例有三个图标覆盖,第一个hot图标使用absolute+margin,设置margin调整位置紧紧跟随header导航最后一个导航链接字体;第二个使用元素脱离文档流,后面的图片直接无视absolute的原理实现重叠;第三个vip图标设置absolute属性后,位置跟原先的位置一样,也就是在图片的后面紧紧跟随,然后设置margin-left图标宽度的负值就可以完成图标覆盖,这里需要注意的一点是为了保证图片和图标之间没有空隙,需要在它们之间设置注释

使用无依赖的绝对定位实现下拉框

这个案例我们主要利用的是absolute的跟随性,配合margin使搜索结果定位到搜索框下边框

居中及边缘对齐定位

第一个例子是图片居中对齐,父元素设置text-align:center,子元素由于是inline-block元素,所以会居中,为了兼容IE浏览器,需要在图片前面设置 ,因为需要占据0.25em所以我们在父元素设置letter-spacing:-.25em

空格宽度参考

第二个例子是右下角边缘对齐,父元素设置text-align:right,子元素设置position:fixed固定定位,并且需要display:inline为了防止错位

各种对齐溢出技巧实例

第一个例子是让星号绝对定位,然后它脱离文档流,不占用任何空间,所以后面的文字对齐就不受影响

第二个例子图标使用绝对定位,然后让小图标做偏移图表宽度,这就实现了图文对齐

第三个例子是文字溢出,使用无依赖绝对定位,文字不断行

absolute与width/height

容器无需固定width/height值,内部元素可拉伸

这个例子使用绝对对位元素left: 0; top: 0; right: 0; bottom: 0;可以实现宽高百分之百的拉伸特性,父元素设置inline-block具有包裹性,我们在这里设置的半透明遮罩层可以完美覆盖图片

容器拉伸,内部元素支持百分比width/height值

一般情况下,父级容器设置height:auto,子元素不能使用百分比高度,这时,子元素设置left: 0; top: 0; right: 0; bottom: 0;利用绝对元素拉伸特性,也可以使用百分比高度

left/right拉伸和width同时存在

同时设置left/right与width起作用的会是width,这时候再使用margin-left/margin-right:auto会使绝对定位水平居中,垂直居中同理,这也就是使用absolute的水平垂直居中的原理

使用absolute实现两栏等高布局

这个例子的实现思路是设置一个width:100%;height:999em的空绝对定位元素,放在侧边栏,给侧边栏添加position:relative限制,然后在绝对定位元素同级放置一个设置position:relative;z-index:1元素包裹住图片,把图片都设置为display:block,最后把容器设置overflow:hidden

实现原理是由于绝对定位元素无高度特性无宽度特性,我们可以伪造一个高度足够高的绝对定位层,同时设置父元素溢出隐藏,那么其多出来的高度就不会显示了,也就实现了看上去的等高布局效果

absolute与网页整体布局

仿慕课网的移动端页面

深入理解absolute

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112017.html

css position: absolute、relative详解

摘要：在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。放置绝对定位对象在可视区域之外会导致滚动条出现。相对定位是相对于元素在文档流中初始位置的，而绝对定位是相对于最近的已经定位的祖先元素。 CSS2.0 HandBook上的解释：设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占...

h9911 2019-08-28 18:00 评论0 收藏0
一些css基础学习笔记

摘要：当父元素设置了的，子元素为时，设置无效当父元素设置了时，子元素超出父元素部分无效只能限制的层级相当于自身进行定位，相对于边界会影响其他元素定位，而无影响自定义拖拽效果同时存在，无效同理，无效可提高层叠级数父元素的较大排前面数值排在上，当前层 relative 1.当父元素设置了relative的zindex，子元素为absolute时，设置zindex无效2.当父元素relative设...

cgh1999520 2019-08-29 16:12 评论0 收藏0
详解css相对定位和绝对定位

摘要：以上两点点可以总结出，相对定位总是以父级左上角为原点进行定位的，如果父级不存在，则以浏览器左上角进行定位。赞助我以写出更好的文章，give me a cup of coffee? 2017最新最全前端面试题案例代码1 .rel{ border: 1px solid #ccc; height: 200px; ...

Jaden 2019-08-28 17:57 评论0 收藏0
前端技术之_CSS详解第六天--完结

前端技术之_CSS详解第六天--完结一、复习第五天的知识 a标签的伪类4个：　　a:link 没有被点击过的链接　　a:visited 访问过的链接　　a:hover 悬停　　a:active 按下鼠标不松手顺序就是“love hate”准则。可以简写： 1 a{ 3 } 4 a:hover{ 6 } background系列属性，CSS2.1层面 ...

番茄西红柿 2019-04-23 13:44 评论0 收藏0
CSS详细解读定位

摘要：有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。我的回答是相对自己文档流中的原始位置定位。这里就不解释脱离文档流的问题，主要研究它的定位问题。一前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性，可以让你更加深入的理解定位带来的一些特性，熟练使用CSS布局。二正文 1.文档流布局的概念将窗体自上而下分成一行行，并在每行中按从左至右的...

1treeS 2019-08-30 14:01 评论0 收藏0