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

固定层效果

难度初级
时长32分
学习人数
综合评分9.67
353人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.5 逻辑清晰
  • 页面表现方面的区别
    查看全部
  • 相同点
    查看全部
  • 不同的地方
    查看全部
  • margin选择器设置的属性会和fixed属性设置重叠,导致<body>层与浏览器可视化窗口产生间距。在标准文档流中,两个元素,上外边距和上外边距,或者上外边距和下外边距相遇时,当两个标签都在标准文档流中时,会选择较大的上外填充
    查看全部
  • 案例实现关键 顶部固定层 #top----position:fixed;top:0;left:0; #mainbody----margin-top:(#top高度+原有间距)px
    查看全部
    0 采集 收起 来源:总结

    2016-05-10

  • 已知一 div 高 35px,紧邻其后的 X 元素上外边距为 15px,为该 div 设置 fixed 定位后——div与浏览器可视窗口上边界相距15px 解析:因为X元素15px的上外边距与body的0px上外边距信息重叠了,所以body也跟着下移15px;又因为,div在父元素body内,且没有设置偏移量,所以div相对其父元素body进行绝对定位 (当绝对定位,未设置偏移量时,显示在body元素的左上角)
    查看全部
    0 采集 收起 来源:练习题

    2016-05-10

  • margin的重叠 1.由于给top选择器设置fixed固定定位时,(top层已经脱离了标准文档流)没有对其设置偏移量,以其父包裹层定位,(当top选择器fixed固定定位设置了偏移量时,则top层的位置按照所设置的偏移量的位置定位),而其父包裹层body的margin与mainbody的上margin值发生了重叠,(此时的body与mainbody属于标准文档流)mainbody的上margin值大于body的margin值,选择了mainbody的上margin值20px(标准文档流中上下margin发生重叠时选择margin值大的那个)所以body下移20px;top层又以body层定位,从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着,则需对maibody或者body层当中数值较大的值进行调节。
    查看全部
  • 在对元素设置固定定位时候,如果希望本元素包含其父包含块中,不需要对其设置(left,top,right,bottom)偏移量
    查看全部
    0 采集 收起 来源:偏移量的设置

    2016-05-10

  • fixed脱离文档流,绝对定位
    查看全部
    0 采集 收起 来源:总结

    2016-05-10

  • absolute与fixed的不同点: 设置偏移量时:absolute:1、无已定位祖先元素,以html为基准;2、有已定位祖先元素,以距其最近,已定位的祖先元素为基准。fixed:有无已定位祖先元素都以浏览器可视窗口为基准偏移。 表现形式(产生滚动条时):absolute:位置随滚动条变化;fixed:1、位置不随滚动条变化;2、被其遮盖的元素可从其下穿过
    查看全部
  • absolute与fixed相同点:(都属于绝对定位形式) 1.完全脱离标准文档流 2.未设置偏移量时,都定位在父元素的左上角。 偏移量——元素设置定位(绝对或相对)后 就具有偏移属性和堆叠属性(z-index) 不同点: absolute 1,会随滚动条变化 fixed 1,位置固定,不会随滚动条变化 2,被他遮盖的元素,可以从其下穿过 [ 收起全文 ]
    查看全部
  • 已知一 div 高 35px,紧邻其后的 X 元素上外边距为 15px,为该 div 设置 fixed 定位后——div与浏览器可视窗口上边界相距15px 解析:因为X元素15px的上外边距与body的0px上外边距信息重叠了,所以body也跟着下移15px;又因为,div在父元素body内,且没有设置偏移量,所以div相对其父元素body进行绝对定位 (当绝对定位,未设置偏移量时,显示在body元素的左上角)
    查看全部
    0 采集 收起 来源:练习题

    2016-05-10

  • margin的重叠 1.由于给top选择器设置fixed固定定位时,(top层已经脱离了标准文档流)没有对其设置偏移量,以其父包裹层定位,(当top选择器fixed固定定位设置了偏移量时,则top层的位置按照所设置的偏移量的位置定位),而其父包裹层body的margin与mainbody的上margin值发生了重叠,(此时的body与mainbody属于标准文档流)mainbody的上margin值大于body的margin值,选择了mainbody的上margin值20px(标准文档流中上下margin发生重叠时选择margin值大的那个)所以body下移20px;top层又以body层定位,从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着,则需对top层的固定定位设置偏移量top:
    查看全部
  • absolute与fixed的不同点: 设置偏移量时:absolute:1、无已定位祖先元素,以html为基准;2、有已定位祖先元素,以距其最近,已定位的祖先元素为基准。fixed:有无已定位祖先元素都以浏览器可视窗口为基准偏移。 表现形式(产生滚动条时):absolute:位置随滚动条变化;fixed:1、位置不随滚动条变化;2、被其遮盖的元素可从其下穿过。
    查看全部
  • absolute与fixed相同点:(都属于绝对定位形式) 1.完全脱离标准文档流 2.未设置偏移量时,都定位在父元素的左上角。 偏移量——元素设置定位(绝对或相对)后 就具有偏移属性和堆叠属性(z-index) 不同点: absolute 1,会随滚动条变化 fixed 1,位置固定,不会随滚动条变化 2,被他遮盖的元素,可以从其下穿过
    查看全部

举报

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

微信扫码,参与3人拼团

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

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