为了账号安全,请及时绑定邮箱和手机立即绑定

固定层效果

难度初级
时长32分
学习人数
综合评分9.67
353人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.5 逻辑清晰
  • 只有元素在设置相对定位,或者绝对定位后,此属性才有效,它的作用是设置元素所在的z轴层级。z-index值越大,元素层级越大。
    查看全部
    0 采集 收起 来源:练习题

    2016-06-04

  • absolute与fixed的不同点 1.设置偏移量时,偏移参照基准 absolute a.无已定位祖先元素,以<html>为基准偏移 b.有已定位祖先元素,以距其最近的、已定位的祖先元素为基准偏移 fixed 有、无已定位祖先元素,都以浏览器可视窗口为基准偏移 2.表现形式(产生滚动条时) absolute 位置会随滚动条变化 fixed a.位置固定,不会随滚动条变化 b.被他遮盖的元素,可以从其下穿过
    查看全部
  • absolute与fixed相同点 第一,完全脱离标准文档流 第二,未设置偏移量时,都定位在父元素的左上角 偏移量--元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)
    查看全部
  • 固定层效果 位于网站顶部,滑动滚动条时,顶部固定不动,网页内容从下面穿过 常用于纵向信息量较大的网页 具备知识: position属性; fixed(固定定位)。 position属性影响因素 1.属性的取值 2.元素偏移量 3.元素偏移参照基准 绝对定位特点:完全脱离标准文档流,兄弟元素不再受其影响
    查看全部
  • margin:0 auto 表示自动居中;
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-04

  • absolute与fixed的不同点 设置偏移量时,偏移量参照基准 absolute 1、无已定位祖先元素,以<html>为基准偏移 2、有已定位祖先元素,以距其最近的,已定位的祖先元素为基准偏移 fixed 1、有、无已定位祖先元素,都以浏览器可视窗口为基准偏移
    查看全部
  • absolute与fixed相同点: 1、完全脱离标准文档流; 2、未设置偏移量时,都定位在父元素的左上角 偏移量---元素设置定位(绝对或者相对)后,就具有偏移量属性和堆叠属性(z-index)
    查看全部
  • fix定位
    查看全部
    0 采集 收起 来源:总结

    2016-06-04

  • 总结:<br> 1、fixed定位:<br> 定位形式---绝对定位;<br> 特点---脱离标准文档流,兄弟元素会从其下穿过;<br> 未设置偏移量:有已定位的祖先元素,以祖先元素为基准定位;无已定位的祖先元素,以浏览器窗口为基准定位。<br> 二、设置偏移量时:1、无定位属性的祖先元素:absolute以当前浏览器窗口为基准,fixed以浏览器窗口为基准;2、有定位属性祖先元素:absolute以有定位属性的祖先元素为基准,fixed以浏览器窗口为基准。 三。顶部固定层的关键点: #top---position:fixed;top:0;left:0; #mainbody---margin-top:(#top高度+原有间距)px;
    查看全部
    0 采集 收起 来源:总结

    2018-03-22

  • absolute与fixed相同点:<br> 1.完全脱离标准文档流<br> 2.未设置偏移量时,都定位在父元素的左上角 偏移量----元素设置定位(绝对或相对)后,就具有偏移属性和堆叠属性(z-index)
    查看全部
  • 绝对定位特点:完全脱离文档流,兄弟元素不再受到其的影响
    查看全部
  • 绝对定位:完全脱离标准文档流,兄弟元素不再受其影响
    查看全部
  • fixed定位
    查看全部
    0 采集 收起 来源:总结

    2016-06-03

  • fixed定位
    查看全部
    0 采集 收起 来源:总结

    2016-06-03

  • 在对元素设置固定定位时,如果希望本元素包含其父包含块中,不需要对其设置偏移量。
    查看全部
    0 采集 收起 来源:偏移量的设置

    2016-06-03

举报

0/150
提交
取消
课程须知
1.您需要掌握简单的html+css相关知识 2.对position定位有简单的认识
老师告诉你能学到什么?
1.position属性中绝对定位(absolute)和固定定位(fixed)的区别 2.偏移量的设置 3.固定层效果的如何实现

微信扫码,参与3人拼团

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

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