固定层效果_学习笔记

首页免费课固定层效果笔记

固定层效果

最热最新

qq_俊辉_0 02:12

position的四种定位属性

查看全部

0 采集收起来源：案例展示及position属性介绍
2016-02-16
慕工程4275476

只有元素在设置相对定位，或者绝对定位后，此属性才有效，它的作用是设置元素所在的z轴层级。z-index值越大，元素层级越大

查看全部

0 采集收起来源：练习题
2016-02-15
韩涵小柒 00:51

磁珠为准

查看全部

0 采集收起来源：总结
2016-02-15
韩涵小柒 00:37

fixed定位特点

查看全部

0 采集收起来源：总结
2016-02-15
韩涵小柒 02:24

随上而走

查看全部

0 采集收起来源：偏移量的设置
2016-02-15
天真吴邪

Fixed定位：定位形式----绝对定位特点-----位置固定不变，兄弟元素会从其下穿过未设置偏移量：1）有已定位祖先元素以祖先元素为基准定位；2）无已定位祖先元素以浏览器窗口为基准定位设置偏移量，有、无定位祖先元素，均以浏览器窗口为基准偏移

查看全部

0 采集收起来源：总结
2016-02-14
Deppon_L

absolute与fixed的相同点：1.完全脱离标准文档流 2.当未设置偏移量设计，无论是否有已定位的祖先元素，都以父元素为参照定位

查看全部

0 采集收起来源：absolute与fixed的相同点
2016-02-14
玉米南瓜粥

如果元素都存在于标准文档流中，margin有垂直合并属性，以大的margin为准。例子中top位于body中，它以在父元素（body）中的位置固定，而此处由于body没有margin值，mainbody有margin-top：20px，所以body也就由于垂直合并属性有了margin-top：20px属性，

查看全部

0 采集收起来源：固定层效果实现
2016-02-12
宝宝心里苦

absolute与fixed的相同点：1.完全脱离标准文档流 2.当未设置偏移量设计，无论是否有已定位的祖先元素，都以父元素为参照定位

查看全部

0 采集收起来源：absolute与fixed的相同点
2016-02-12
罗夜夜

一个元素在它上方距离它最近的元素，就是它的父元素；同样的，一个元素在它包含之内的最近的元素，就是它的子元素

查看全部

0 采集收起来源：absolute与fixed的相同点
2016-02-12
imlk 00:57

...

查看全部

0 采集收起来源：总结
2016-02-09
慕神8710851

固定层效果如何实现 1.固定层效果实现关键代码： #top......position:fixed;top:0;left:0; #mainbody......margin-top:(#top高度+原有间距)px； 2.影响因素有哪些？属性的取值，元素的偏移量，元素偏移参照基准 3.absolute和fixed都是绝对定位，相同点如下： a.都完全脱离标准文档流。 b.未设置偏移量时，都定位在父元素左上角。 4.absolute和fixed的不同点主要体现在两个方面：第一方面体现在设置偏移量时，当absolute无已定位祖先元素时，以html为基准偏移。有已定位父元素时，以距其最近的已定位的祖先元素偏移。而fixed不论有无已定位父元素，它都以浏览器可视窗口为基准偏移。第二方面体现在表现形式上，absolute的位置会随着滚动条的变化而变化，而fixed位置固定，不会随着滚动条的位置变化，而且被它遮盖住的元素，能从它的下方穿过。

查看全部

0 采集收起来源：总结
2016-02-09
慕神8710851

1.关于fixed的定位及偏移量基准参照<br> 由于给top选择器设置fixed固定定位时，(top层已经脱离了标准文档流)没有对其设置偏移量，以其父包裹层定位，（当top选择器fixed固定定位设置了偏移量时，则top层的位置按照所设置的偏移量的位置定位）<br> 2.margin重叠问题<br> fixed固定条的父包裹层body的margin与mainbody的上margin值发生了重叠，（此时的body与mainbody属于标准文档流）mainbody的上margin值大于body的margin值，选择了mainbody的上margin值20px（标准文档流中上下margin发生重叠时选择margin值大的那个）所以body下移20px；top层又以body层定位，从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着，则需对top层的固定定位设置偏移量top: 又是一个比较重要的基础知识点：文档流中，当两个垂直边界（margin-top或margin-bottom）相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。补充解决方案：1.外层padding2.透明边框border:1pxsolidtransparent; 3.绝对定位postion:absolute:4.外层DIVoverflow:hidden; 5.内层DIV　加float:left;display:inline;6.外层DIV有时会用到zoom:1;

查看全部

0 采集收起来源：固定层效果实现
2018-03-22
种花的人

.关于fixed的定位及偏移量基准参照由于给top选择器设置fixed固定定位时，(top层已经脱离了标准文档流)没有对其设置偏移量，以其父包裹层定位，（当top选择器fixed固定定位设置了偏移量时，则top层的位置按照所设置的偏移量的位置定位） 2.margin重叠问题 fixed固定条的父包裹层body的margin与mainbody的上margin值发生了重叠，（此时的body与mainbody属于标准文档流）mainbody的上margin值大于body的margin值，选择了mainbody的上margin值20px（标准文档流中上下margin发生重叠时选择margin值大的那个）所以body下移20px；top层又以body层定位，从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着，则需对top层的固定定位设置偏移量top:

查看全部

0 采集收起来源：固定层效果实现
2016-02-05
种花的人

在对元素进行固定定位时，希望其包含在父包含块中，那么就不要设置偏移量

查看全部

0 采集收起来源：偏移量的设置
2016-02-05