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

固定层效果

难度初级
时长32分
学习人数
综合评分9.67
353人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.5 逻辑清晰
  • 案例实习关键
    查看全部
    0 采集 收起 来源:总结

    2016-01-22

  • position 定位拥有 5 种形式:absolute、fixed、relative、static和inherit。 fixed定位和absolute定位都是绝对定位。相对定位的元素没有完全脱离了标准文档流
    查看全部
    0 采集 收起 来源:练习题

    2016-01-22

  • 绝对定位脱离标准文档流,其兄弟元素不再受其影响
    查看全部
  • fixed定位 定位形式——绝对定位 特点——位置固定不变,兄弟元素会从其下穿过, 未设置偏移量: 有已定位祖先元素,以祖先元素为基准定位 无已定位祖先元素,以浏览器窗口为基准定位 设置偏移量,有、无已定位祖先元素,均已浏览器窗口为基准偏移。 顶部固定层效果实现关键: #top----position:fixed; top:0; left:0; #mainbody----margin-top:(#top高度+原有间距)px
    查看全部
    0 采集 收起 来源:总结

    2016-01-22

  • 没有设置祖先元素到底是<body>元素还是<html>?
    查看全部
  • 偏移属性(上右下左)和堆叠属性(z-index)
    查看全部
  • 固定层效果一般用于纵向信息量大的网页。
    查看全部
  • 顶部固定
    查看全部
    0 采集 收起 来源:总结

    2016-01-21

  • static——静态定位 relative——相对定位 absolute——绝对定位 fixed——固定定位
    查看全部
  • 任务1:margin:0 auto; 任务2:position:fixed;top:0; 任务3:margin-top:63px;(因为top的border只有bottom一条边为1px,top自身height为42px) 所以:42+1+20=63px
    查看全部
    1 采集 收起 来源:编程练习

    2016-01-21

  • 1.position 定位拥有 5 种形式:absolute(绝对定位)、fixed(绝对定位)、relative(相对定位)、static(静态定位)和inherit(继承)。 2.fixed定位和absolute定位都是绝对定位。
    查看全部
    0 采集 收起 来源:练习题

    2016-01-20

  • 固定定位须知: 1、如果希望包含在其直接父包含块中,则无需设置偏移量; 2、如果你设置了偏移量,那么会按照浏览器可视窗口进行定位。
    查看全部
    0 采集 收起 来源:偏移量的设置

    2016-01-20

  • fixed定位也是绝对定位,固定定位的主要特点是,兴地元素会从下面穿过去。 在没有设置偏移量的时候,如果祖先元素有了定位,fixed定位会以祖先元素的位置进行定位,如果没有设置祖先元素,则以浏览器的窗口定位 另一种情况,设置偏移量的情况下,无论祖先元素有没有定位元素,都以窗口为基准偏移
    查看全部
    0 采集 收起 来源:总结

    2016-01-20

  • 文档流中,当两个垂直边界(margin-top或margin-bottom,body top和 DIV的 top)相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 在垂直方向上,margin-top值存在重叠----也就是外边距合并:当两个垂直外边距相遇时会发生外边距合并,合并后的外边距的高度等于两个外边距中较大的外边距值。这只发生在普通文档流中的块级框中,而行框、绝对定位以及浮动则不会出现。所以一般建议在父级元素里加margin,在子级元素里用padding。
    查看全部
  • absolute与fixed的不同点 absolute 1.无已经定位的祖先元素,以html为基准便宜 2.有已定位的祖先元素,以距其最近的、已经定位的祖先元素为基准偏移 fixed 无论怎样都是以浏览器窗口为基准偏移的
    查看全部

举报

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

微信扫码,参与3人拼团

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

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