position fixed的相对容器是什么

Miracle_lihb 发布于2019-08-29 15:16 / 2692人阅读

摘要：然而并不是，以下摘要自不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。当元素祖先的属性非时，容器由视口改为该祖先。然而，滚动的滚动条，元素并没有按照想象中那样固定在容器的一个位置上，而是表现为的效果。

请使用chrome浏览器敲打例子代码！

长久以来，我和部分同学对css中position:fixed的理解是该元素相对屏幕视口的定位。然而并不是，以下摘要自[MDN](
https://developer.mozilla.org...:

position:fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed
属性会创建新的层叠上下文。当元素祖先的 transform  属性非
none 时，容器由视口改为该祖先。

什么意思呢？我们用例子来表示。

下面的例子是元素相对body的定位：


    
        我是fixed元素
    
    
        我是其他元素

body {
    height: 2000px;
}
.son {
    position: fixed;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: #f00;
}
.other {
    height: 1000px;
}

这个例子里，body的滚动条滚动后，son元素的位置都是相对屏幕视口的位置。根据MDN的说明，改下代码的css部分添加parent元素样式:

.parent {
    margin-top: 100px;
    height: 500px;
    overflow-y: auto;
    background: #ff0;
    transform: translate(0,0);
}

这个时候，会发现滚动body的滚动条的时候，son元素跟着parent一起走了。然而，滚动parent的滚动条，son元素并没有按照想象中那样固定在parent容器的一个位置上，而是表现为absolute的效果。(这样就不能做我们心爱的吸顶效果了)。

整个例子下来，就总结出一句：这不是蛋疼吗？既然fixed在transform里变成了absolute的行为，为毛transform还要去影响fixed呢？

引用：
https://developer.mozilla.org...
http://www.zhangxinxu.com/wor...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113213.html

position 的属性值

摘要：注意当该固定元素的祖先元素的属性非时，容器由浏览器窗口改为该祖先元素粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。理论上来说，全部 position 的取值有8个包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西红柿 2019-04-23 13:30 评论0 收藏0
CSS Position（定位）

摘要：定位的起始位置为此元素原先在档流的位置。忽略和从父元素继承该属性的值以上的和可以使得元素脱离文档流。绝对定位脱离档流的布局，遗留下来的空间由后的元素填充。默认定位表示此元素为默认定位式。 Position（定位） position可以取五个值参数描述 absolute 绝对定位；脱离⽂档流的布局，遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(postio...

lpjustdoit 2019-08-29 18:39 评论0 收藏0
滚动视差？CSS 不在话下

摘要：可以感受下种不同取值的不同效果使用实现滚动视差首先，我们使用来实现滚动视差。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗...

RobinTang 2019-04-23 13:29 评论0 收藏0
CSS粘性定位是怎样工作的

摘要：怎样才能让粘性定位起作用粘性定位有两个主要部分，粘性元素和粘性容器。这是粘性元素可以浮动的最大区域。最好是在以粘性容器底部为自然位置的元素上使用它。翻译：疯狂的技术宅原文：https://medium.com/@elad/css-... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章浏览器对 CSS粘性定位有着非常好的支持，但很多...

Wildcard 2019-08-30 15:55 评论0 收藏0
CSS粘性定位是怎样工作的

摘要：怎样才能让粘性定位起作用粘性定位有两个主要部分，粘性元素和粘性容器。这是粘性元素可以浮动的最大区域。最好是在以粘性容器底部为自然位置的元素上使用它。翻译：疯狂的技术宅原文：https://medium.com/@elad/css-... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章浏览器对 CSS粘性定位有着非常好的支持，但很多...

lovXin 2019-08-02 14:14 评论0 收藏0