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

固定层效果

难度初级
时长32分
学习人数
综合评分9.67
353人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.5 逻辑清晰
  • 固定层效果: margin属性的重叠:当在标准文档流中,两个元素,一个是上外边距和上外边距,或者上外边距和下外边距有相遇的时候,而且必须是在纵向,左右方向是不会发生重叠的,只有上下方向会发生重叠。这个时候,body标签在这个标准文档流之中,mainbody元素也在标准文档流之中,它们两相遇之后,其中有一个设置了上外填充,那么这个时候,它们两的边距就发生了重合。重合的取值会取外填充或者上外填充,或者下外填充值较大的那一个。 如果发生重叠,要想设置了绝对定位为fixed的值固定在可视窗口的最顶端,可设置它的top:0px.最底端:bottom:0px; 元素设置{position: fixed; }或{position: absolute; }之后,会脱离标准文档流,也就是说,其后的标准文档流元素{position: relative;}或默认的{position: static;}会按正常标准文档流来排版(忽视绝对定位的元素)
    查看全部
  • 顶部固定定位: #top position:fixed; //top:0;left:0; #mainbody margin-top:(#top高度+原有间距)px;
    查看全部
    0 采集 收起 来源:总结

    2015-04-04

  • top:0;挨着浏览器窗口.
    查看全部
  • position属性包括: 1.静态定位=>static 2.相对定位=>relative 3.绝对定位=>absolute 包括固定定位=>fixed(重点)
    查看全部
  • 顶部固定层
    查看全部
    0 采集 收起 来源:总结

    2015-04-03

  • absolute与fixed的不同点: 【absolute 就近原则】:位置会随滚动条变化 1、有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移 2、无已定位的祖先元素,就以<html>为基准 【fixed】 无论有无已定位祖先元素,都以浏览器的可视化窗口为基准:不随滚动条变化 被它遮盖的元素,可以从其下穿过
    查看全部
  • 固定层效果: absolute和fixed相同点: 1.完全脱离标准文档流 2.未设置偏移量时,都定位在父元素的左上角。 *偏移量——元素设置定位(绝对/相对)后,就具有偏移属性和堆叠属性(z-index)
    查看全部
  • 固定层效果:一般用在信息量较大的网页,例如QQ空间,微博,淘宝网 用到的:position属性:fixed(固定定位) 绝对定位的特点:完全脱离标准文档流,兄弟元素不再受其影响 1.position定位有三种形式的定位:静态定位、相对定位、绝对定位、固定定位,其中,固定定位其实是绝对定位,只不过absolute定位和fixed定位的表现形式不同。 2.position定位受到多方面的影响: (1)属性的取值:static、relative、absolute、fixed (2)元素的偏移量 (3)元素偏移参照基准
    查看全部
  • absolute与fixed的不同点: 【absolute 就近原则】 1、有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移 2、无已定位的祖先元素,就以<html>为基准 【fixed】 无论有无已定位祖先元素,都以浏览器的可视化窗口为基准:不随滚动条变化。
    查看全部
  • absolute和fixed相同点: 1.完全脱离标准文档流 2.未设置偏移量时,都定位在父元素的左上角。 *偏移量——元素设置定位(绝对/相对)后,就具有偏移属性和堆叠属性(z-index)
    查看全部
  • absolution和fixed的不同
    查看全部
  • absolution和fixed的区别
    查看全部
  • absolute和fixed相同点: 1.完全脱离标准文档流 2.未设置偏移量时,都定位在父元素的左上角。 *偏移量——元素设置定位(绝对/相对)后,就具有偏移属性和堆叠属性(z-index)
    查看全部
  • 。。。
    查看全部
    0 采集 收起 来源:偏移量的设置

    2015-03-29

  • fixed定位:被他遮盖的元素可以从其下穿过
    查看全部

举报

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

微信扫码,参与3人拼团

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

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