网站建设网络营销平台: 云搜系统,企业网站建设多少钱,成都营销型网站制作公司,新万网站建设目录 1#xff0c;绝对定位问题1#xff0c;绝对定位元素的特性2#xff0c;初始包含块问题 2#xff0c;粘性定位注意点#xff1a; 1#xff0c;绝对定位问题
1#xff0c;绝对定位元素的特性
display 默认为 block。所以行内元素设置绝对定位后可直接设置宽高。脱离… 目录 1绝对定位问题1绝对定位元素的特性2初始包含块问题 2粘性定位注意点 1绝对定位问题
1绝对定位元素的特性
display 默认为 block。所以行内元素设置绝对定位后可直接设置宽高。脱离文档流所以 margin: auto 失效。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时则相对于 ICBinitial containing block初始包含块。
2初始包含块问题
如果参考系是初始包含块则
设置 top 时参考点是页面顶部而不是浏览器首屏顶部。 设置 bottom 时参考点是浏览器首屏的底部而不是页面的底部。 所以有这么一道经典面试题大家品一下 2粘性定位
一句话总结可以认为是相对定位和固定定位的混合定位元素在滚动到某个阈值之前表现为相对定位之后表现为固定定位。
先看下实际应用 实现起来也比较简单只需要给粘性定位元素一个 top 值即可。当定位元素距离浏览器视口顶部到达 top 值后就表现为固定定位。
举例
headstyle* {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
bodydiv classheader顶部其他元素/divdiv classsticky/divdiv classcontent/div
/body注意点
至少得指定 top, right, bottom,left 其中之一才可使粘性定位生效。否则其行为与相对定位相同。和其他定位一样top 优先级大于 bottomleft 优先级大于 right粘性定位元素的包含块设置 overflow: hidden; 会使粘性定位失效。
以上面的例子来说下面的写法就会使粘性定位失效。
headstyle.box {position: relative;overflow: hidden;}/style
/head
bodydiv classboxdiv classheader顶部其他元素/divdiv classstickyone/divdiv classcontent/div/div
/body以上。
