粘性布局以及粘性布局失效问题

在页面中，需要侧边的导航栏，除了固定于浏览器的还有一种当浏览器滚动到相对导航栏某个距离时，导航栏不再固定，而是和浏览器的滚动一起向下移动

这就是粘性布局

// css
.box{width: 1200px;margin: auto;
}
.top{height: 300px;background-color: brown;margin-bottom: 20px;
}
.container {background: #eee;height: 10000px;display: flex;justify-content: space-between;
}
.left {position: -webkit-sticky;position: sticky;height: 100px;background: #ff7300;top: 10px;width: 100px;
}
.mian{width: 900px;height: 2000px;background: pink;
}
.right{width: 100px;background-color: blueviolet;
}

<div class="box"><div class="inBox"><div class="top"></div><div class="container"><div class="left">内容1</div><div class="mian"></div><div class="right"></div></div></div>
</div>

这就是简单的粘性布局的应用，但是粘性布局也是有一定前提的，需要父级overflow：visible（这是默认值），当这个值是hidden或其他值的时候，粘性布局就会失效

.box{width: 1200px;margin: auto;/* overflow: hidden; */
}
.inBox{/* overflow: hidden; */
}
.container {background: #eee;height: 10000px;display: flex;justify-content: space-between;/* overflow: hidden; */
}

这几个地方的设置这个值粘性布局就会失效，并且当开启粘性布局的盒子，的直属父级在这里是.container，粘性布局会像相对布局效果一样（内容1和灰色背景）

粘性布局以及粘性布局失效问题相关推荐

弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
css【详解】grid布局—— 网格布局（栅格布局）
网格布局(Grid)是最强大的 CSS 布局方案 grid布局和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
Flex布局：Flex布局
1.flex布局与传统布局的区别传统布局: 兼容性好但是布局繁琐局限性,不能再移动端很好的布局 flex布局: 操作方便,布局简单,移动端应用广泛但是IE11或更低版本不支持flex布局使用范 ...
移动布局——流式布局
流式布局文章目录流式布局 1. 什么是流式布局 2. 固定布局和流式布局比较 3.流式布局的缺点 3.弹性布局 3.1 弹性盒子属性--父容器属性 1.flx-direction属性 2.flex ...
移动端布局之flex布局
什么是flex布局基本含义 Flex是Flexible Box的缩写(注:意思是"灵活的盒子容器"),意为"弹性布局",是 CSS3 引入的新的布局模式,用来 ...
移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀为了兼容老版本私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
CSS 布局 - grid - 二维布局方法 - 网格布局
目录一.grid 二维布局模块二.基本概念理解逻辑 - 容器 - 项目理解行列 - 二维布局理解单元格网格线三.容器属性使用方法 CSS 重要属性配置 grid-template-co ...

粘性布局以及粘性布局失效问题

粘性布局以及粘性布局失效问题相关推荐

最新文章

热门文章

粘性布局 以及粘性布局失效问题

粘性布局 以及粘性布局失效问题相关推荐

最新文章

热门文章

粘性布局以及粘性布局失效问题

粘性布局以及粘性布局失效问题相关推荐