为什么position:sticky不能与flexbox一起工作？
position:sticky和flexbox在某些情况下无法一起工作，这是因为它们的工作原理和特性之间存在一些冲突。
首先，让我们了解一下position:sticky和flexbox的基本概念和特性：
- position:sticky：它是CSS中的一个定位属性，可以使元素在滚动过程中保持在特定位置。当元素滚动到指定位置时，它会固定在该位置，直到滚动到另一个指定位置。这在创建粘性导航栏或侧边栏等效果时非常有用。
- flexbox：它是一种用于布局的CSS模块，通过定义容器和其内部元素的属性来实现灵活的布局。它提供了强大的布局能力，可以轻松实现自适应和响应式布局。
然而，由于position:sticky和flexbox的工作原理存在一些冲突，导致它们无法完全兼容。具体原因如下：
- 弹性布局：flexbox布局是基于弹性盒子模型的，它会根据容器的空间和元素的属性自动调整元素的位置和大小。而position:sticky需要根据滚动位置来判断是否固定元素，这与flexbox的自动调整特性存在冲突。
- 布局计算：flexbox布局在计算元素位置时，会根据元素的弹性属性和空间分配规则进行计算。而position:sticky需要在滚动时动态计算元素的位置，这与flexbox的布局计算方式不兼容。
- 元素层级：position:sticky的元素在滚动时会创建一个新的层级，使其脱离正常的文档流。而flexbox布局是基于文档流的，这导致在某些情况下，position:sticky的元素无法正确地与flexbox布局的其他元素进行交互。
综上所述，由于position:sticky和flexbox之间的工作原理和特性冲突，它们无法完全兼容。如果需要同时使用它们，可以考虑使用其他布局方式或通过JavaScript等方式来实现相应的效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云弹性容器实例：https://cloud.tencent.com/product/eci
- 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 腾讯云云存储COS：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云人工智能平台：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mad
- 腾讯云音视频处理：https://cloud.tencent.com/product/mps
相关·内容
} #container{ display:flex; position:sticky; }
padding:7px;
border-radius到目前为止，我已经尝试将它应用于标签，因为我真的认为它可以工作。我还尝试将其应用于#main-content
浏览 38提问于2018-07-18得票数 3
8回答
我被困在这上面一小段时间了，我想分享一下这个position: sticky + flexbox的问题： display: flex;} background-color: blue;.sticky{
position: -webkit-stick
浏览 15提问于2017-06-08得票数 209
回答已采纳
: 100%;}
width: 100%; background-color: pink;}
position: absolute; transform: translate(-50%, 0); background-color: white;}
p
浏览 0提问于2021-03-30得票数 0
我的测试代码是：.block { width: 50%;}
position: sticky;
浏览 1提问于2019-02-10得票数 6
2回答
我试图使position: sticky和display: flex属性在Internet 11上工作。 This is the sticky box</div> display: flex;
height:200px
浏览 0提问于2019-01-29得票数 2
回答已采纳
4回答
"> </div> </div>如果我将position:sticky设置为侧栏列，则得到侧栏：的粘性行为。CSS： position: sticky;
浏览 3提问于2016-07-14得票数 18
回答已采纳
使用我的示例，如果flexbox被注释掉，标题导航栏是粘性的，但当没有内容时，这会阻止页脚定位在视区的底部。启用flexbox后，页眉导航栏不再粘滞，但页脚的工作方式如我所愿。有没有一种方法可以让这两种情况一起工作？ html {}
/* Without this line, the yellow navbar is sticky.With it, the footer is sticky. */
浏览 17提问于2019-08-22得票数 0
在safari和Opera上，它的工作原理非常完美，但在Safari和Firefox中却根本不起作用。有人能帮我解决这个问题吗？)：jQuery(document).ready(function($) {});.sidestick { position: -moz-sticky;
position: -ms-<
浏览 2提问于2016-11-18得票数 0
回答已采纳
justify-content: space-around; width: 100vw; position:sticky; display: inline-flex; border-color:red ;: sticky;center{ border-style: dotted;
浏览 2提问于2022-03-30得票数 0
回答已采纳
1回答
当父元素是position:absolute;时，如何使元素从flexbox转到flexbox？当然，我不知道滚动条的大小，因为它取决于每个导航器.否则我只会做right:17px;之类的事情。但是，由于布局是基于flexbox的，所以我看不出如何避免使用这种方法，因为使用基本flexbox的侧边栏在定
浏览 5提问于2017-05-08得票数 3
3回答
这是我第一次和SASS在一起，很抱歉这听起来这么简单。我正在尝试为我目前拥有的position: sticky;应用一个混合器： -webkit-position: $sticky; -ms-position: $sticky;
-o-position
浏览 1提问于2018-04-20得票数 1
回答已采纳
4回答
包含按钮的div就在下面： <div class="col-md-offset{ bottom: 0; background: rgba(0, 211, 211, 0.6);<script src="{
position: sticky
浏览 0提问于2016-06-06得票数 30
1回答
弹性容器中的粘滞条
、、、
但是，如果父容器是一个flex框，则position: sticky无法工作。="child-three"></div>下面是css： display: -webkit-box; -ms-flex-line-pack: baseline;}
浏览 0提问于2019-01-04得票数 0
, display: flex;}
position: sticky; top: 0; position: sticky; left: 0;<div classsticky-cell</div&
浏览 10提问于2022-11-29得票数 0
回答已采纳
我跟踪了这个，它工作得很好。不幸的是，当元素同级包含AgGrid而不是简单/简单的段落/div时，粘滞将不再起作用，请参见此<!="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" <style> <em
浏览 3提问于2022-07-06得票数 0
回答已采纳
为什么这个css代码不能与IE 11一起工作？</div>width:100%;max-width: 100%;display:-ms-flexboxms-flex-pack: end;}
padding-bottom:50px;
display:-m
浏览 30提问于2019-01-05得票数 3
回答已采纳
如何让position: sticky正常工作？我在Chrome 26.0.1410.43 m中尝试了以下内容，但它不起作用： position: -webkit-sticky; position: -ms-sticky; position
浏览 80提问于2013-03-27得票数 43
回答已采纳
1回答
我有一个由这个垂直结构组成的应用程序:一个导航栏、一个搜索部分和一个带有结果的表格。这些树元素中的每一个都占用了它所需要的空间，而不使用固定的大小。更多的搜索部分有隐藏的子部分，因此它的大小可以随着时间的推移而改变。如果我设置
如何强制表使用屏幕上的剩余空间，并在需要时显示滚动条？
浏览 0提问于2018-12-07得票数 1
回答已采纳
top-of-site-pixel-anchor")); background: purple; color: white; position: relative; left: 0; body.header-not-at-top {
浏览 27提问于2019-10-15得票数 0
2回答
仅仅使用div和css就可以在构建的超文本标记语言表格上获得position: sticky效果吗？显然，如果我尝试将position: sticky规则添加到已包含display: table-header-group规则的标头中，粘性效果将为空。</div>CSS display: table; display: table-header-group;
position:
浏览 0提问于2017-06-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
