公司网站维护与更新三亚百度推广地址
目录
- 1，绝对定位问题
- 1，绝对定位元素的特性
- 2，初始包含块问题
- 2，粘性定位
- 注意点：
1，绝对定位问题
1，绝对定位元素的特性
display默认为block。所以行内元素设置绝对定位后可直接设置宽高。- 脱离文档流，所以
margin: auto失效。 - 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。
2，初始包含块问题
如果参考系是初始包含块，则
设置 top 时，参考点是页面顶部，而不是浏览器首屏顶部。
设置 bottom 时，参考点是浏览器首屏的底部，而不是页面的底部。
所以有这么一道经典面试题，大家品一下：
2，粘性定位
一句话总结：可以认为是相对定位和固定定位的混合，定位元素在滚动到某个阈值之前表现为相对定位，之后表现为固定定位。
先看下实际应用：
实现起来也比较简单，只需要给粘性定位元素一个 top 值即可。当定位元素距离浏览器视口顶部到达 top 值后，就表现为固定定位。
举例：
<head><style>* {margin: 0;padding: 0;}.header {height: 200px;background-color: seagreen;}.sticky {position: sticky;top: 20px;width: 50px;height: 50px;background-color: salmon;}.content {height: 800px;background-image: linear-gradient(#e66465, #9198e5);}</style>
</head>
<body><div class="header">顶部其他元素</div><div class="sticky"></div><div class="content"></div>
</body>
注意点：
- 至少得指定
top,right,bottom,left其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 - 和其他定位一样，
top优先级大于bottom，left优先级大于right - 粘性定位元素的包含块，设置
overflow: hidden;会使粘性定位失效。
以上面的例子来说，下面的写法就会使粘性定位失效。
<head><style>.box {position: relative;overflow: hidden;}</style>
</head>
<body><div class="box"><div class="header">顶部其他元素</div><div class="sticky">one</div><div class="content"></div></div>
</body>
以上。