建议.weui_tabbar样式添加 z-index

[qiujy]

当 tab 项中有列表组件(.weui_select)时，它的选项会层叠在 tab 选项之上，建议给.weui_tabbar添加 z-index 属性。
另外， Tabbar组件使用时必须 外层要套个 div，样式设置为{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}，否则.weui_tab_bd部分就会有问题。

[progrape]

tab 组件是占据容器的高度的，你提出的“绝对定位，上下左右设置为 0”是一种方法，另一种方法是设置父容器高度 100%，像 demo 给出的那样。

另外，“.weui_select”层叠在 tab 之上，有示例或者截图不？方便我们定位问题~

[qiujy]

示例如下，就是在 tabbar 的内容框里添加一个列表组件，当列表组件与 tabbar 重叠时，就会出来这个问题。没法发图。。。。
`

国家/地区

美国 中国 英国

微信

通讯录

发现

我

`

[cncolder]

增加一条理由:

在iPhone上面, 由于.weui_tab_bd { padding-top: 50px; }刚好盖住.weui_tab_navbar, 导致tab点不到, 同样需要.weui_navbar_item { z-index: 1; }. Android上却没有这个问题.

[progrape]

get it ~

[YZEweui]

“tab 组件是占据容器的高度的，你提出的“绝对定位，上下左右设置为 0”是一种方法，另一种方法是设置父容器高度 100%，像 demo 给出的那样。” 试过了，.weui_tab_bd部分还是会有问题。
“Tabbar组件外层套个 div，样式设置为{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}。”有效。
建议作者将每个demo做成单个html页面，尽量少引入额外的.css文件.js文件，这样效果才最接近用户使用。

[progrape]

@qiujy 我用你的代码看效果，iOS 效果没有层叠在上面，而是往上推；Android 的效果是盖住了整个页面，这是浏览器的行为，加 z-index 也还是会盖住。

@cncolder 提到的 navbar 在 iPhone 上点击不了的问题，确实是个 bug，需要修正~

iOS 效果

Android 效果

代码：http://codepen.io/progrape/pen/KzVrjd

[skinTest]

iphone 上 chrome 和 safari均无法点击，我的解决是在
.nav_bar_item 添加 z-index: 30

[cncolder]

@skinTest 你要加到30的话, mask就得加到31.

[zhyzhy782]

Yo!

There is an interesting story I've read recently, I really liked it. You may find it here http://ferdinando.beverlypicture.com/e7uoo/577

Take care, zhyzhy782