为了账号安全,请及时绑定邮箱和手机立即绑定
  • 绝对定位的特性,不设left和top值的话,他的位置是相对于他本来所应该处于文档流的位置,只是绝对定位后,他会飘起来,所以他具有跟随性,不与绝对定位一起使用的话会产生更多更好的效果。 在绝对定位的元素之前是什么状态就是什么状态,比如说之前是inline,绝对定位之后还是inline水平, 唯独IE7不同,IE7会将所有绝对定位的元素设为display:inlien-block,解决办法是在绝对定位元素加一个无意义的父DIV标签, DIV标签要设置为:display:block; 技巧一,图片居中,可以在绝对定位的图片的前面输入一个空格,然后父div设定text-align:center,这样就将空格移动居中的地方去了,而由于绝对定位的跟随性,他也跟随在空格后面一起居中,在加上maigin-left:负的自身宽度/2,就稳稳当当居中了,居左居右都是同样的道理。
  • 可以这样理解 absolute把元素从 文档流里拉了出来,这样div就没东西包了, 所有 这个时候 其实div是“空”的 也就是没有东西包了自然就变成了这个样子了~
  • 绝对定位的特性,不设left和top值的话,他的位置是相对于他本来所应该处于文档流的位置,只是绝对定位后,他会飘起来,所以他具有跟随性,不与绝对定位一起使用的话会产生更多更好的效果。 在绝对定位的元素之前是什么状态就是什么状态,比如说之前是inline,绝对定位之后还是inline水平, 唯独IE7不同,IE7会将所有绝对定位的元素设为display:inlien-block,解决办法是在绝对定位元素加一个无意义的父DIV标签, DIV标签要设置为:display:block; 技巧一,图片居中,可以在绝对定位的图片的前面输入一个空格,然后父div设定text-align:center,这样就将空格移动居中的地方去了,而由于绝对定位的跟随性,他也跟随在空格后面一起居中,在加上maigin-left:负的自身宽度/2,就稳稳当当居中了,居左居右都是同样的道理。
  • 下拉框与绝对定位:

    大众做法:

    1,父容器relative;下拉框absolute;

    2,无依赖的绝对定位:下拉ul在input前面(DOM结构),然后absolute,通过margin定位即可;

    优点:自适应强,应付各种变化环境

    <!--此处有图片-->

  • z-index无依赖 1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素; 2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index; 3.如果多个绝对定位交错,非常非常少见,z-index:1控制; 4.如果非弹窗类的绝对定位元素z-index>2,必定z-index冗余,请优化!
  • Ie7下绝对定位永远是inline-block,解决办法是绝对定位元素外加一个div
    00:00
    看视频
  • absolute的破坏性是对图片的absolute化。图片设置absolute后,图片就从标准文档流中脱离出来,没有东西可以继续支撑容器的高度,容器自然就坍塌了。好像把房子的柱子挪到房子外边,房子果断就塌了 absolute的包裹性是对容器的absolute化。容器设置absolute后,容器变为了 inline-block,容器本身没有设置宽度和高度的话,那么容器的宽高就等于内容的宽高,表现结果就是容器把内容包裹起来。
  • 位置跟随:原来什么位置,绝对定位后还是在那个位置(但不包括float的情况,绝对定位会去浮动)
  • 浮动会让父元素高度塌陷,绝对定位会让父元素的高度和宽度都会塌陷
  • <!--注释节点 --> 使用注释节点避免相邻节点间插入空格。 只设置absolute之后(不依赖绝对定位,也不用设置left,top(left,top即偏移量:如果父元素没有定位,则相对于祖先元素定位,如果父元素设置了定位则相对于父元素定位)等),有个非常大的特性“跟随性”,当它是普通元素时,呆在什么位置,绝对定位后,还呆在什么位置(无依耐性使用的是margin定位)。
  • z-index无依赖 1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素; 2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index; 3.如果多个绝对定位交错,非常非常少见,z-index:1控制; 4.如果非弹窗类的绝对定位元素z-index>2,必定z-index冗余,请优化! 动画尽量加在绝对定位元素之上。
    03:37
    看视频
  • 可以这样理解 absolute把元素从 文档流里拉了出来,这样div就没东西包了, 所有 这个时候 其实div是“空”的 也就是没有东西包了自然就变成了这个样子了~
  • 图中的星号 邮箱后的小图标 都是用了无依赖的绝对定位再加个margin负值 文本部分已经超出了父级的宽度,但用了无依赖的绝对定位 不会自动换行

举报

0/150
提交
取消
课程须知
虽说是深入,实际更适合鲜肉小伙伴
老师告诉你能学到什么?
absolute基本特性的感性认知。absolute可能的理解误区纠正。absolute诸多高级技巧的应用实例。absolute在移动web布局中的大放异彩。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!