4回答

好帮手慕慕子

2020-09-15

同学你好，整体思路就是使用定位让元素固定在一个位置上，然后通过给里面的元素添加overflow:auto;属性，实现内容超出滚动。

以源码为例，解析这部分功能实现的思路如下：

使用绝对定位，结合top等属性，让menu-inner盒子高度为当前屏幕剩余的空白区域（即：不包含nav和tab-abr区域）。然后添加的overflow：hidden;属性，超出范围的内容就隐藏起来了。

menu-inner下的子元素left-bar和right-content下right-list元素设置了overflow:auto,内容超出就会出现垂直方向的滚动条，实现内内容的滚动。

同学可以结合源码理解一下

截图中黄色的被盖住了，老师测试源码没有这种情况，建议同学新建提问，将你写的完整直接粘贴过来，老师针对同学的代码进行测试，帮助同学准确的定位与解决问题，祝学习愉快~

0

陈立天

提问者

2020-09-15

还有就是把这个黄色的也盖住了

0

陈立天

提问者

2020-09-15

老师能解答一下这个什么功能实现定位的么？ 开始我我发现自己写的页面滚动会把header-tab也拖动不见了 要加上这个 那么这个什么原理？

0

好帮手慕慕子

2020-09-15

同学你好， 对于你的问题解答如下：

1、 align-item和align-self的区别如下：

（1）align-item是设置在弹性盒子上，针对弹性盒子在所有的项目元素有效。示例：

弹性盒子下的所有项目都垂直居中了。

（2）align-self是设置在项目元素上的，针对的是单个元素有效。示例：

只有第一个项目垂直居中了

2、同学截图的代码中，item-text元素属于弹性盒子下的项目元素，不可以使用align-items属性，只能使用align-self属性，所以需要通过align-self属性设置居中。

如果还有疑问，可以提交作业，备注上你的问题，批作业的老师会针对你的完整项目测试，给出解决方案。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0