最上层,z-index不起作用
时间: 2023-10-14 13:58:48 浏览: 132
回答: 当设置元素的z-index属性时,如果该元素的position属性为fixed,那么它会脱离标准流并且层级会比同级元素高,显示在兄弟节点的上部。为了确保z-index起作用,需要将同层级节点的z-index设置为大于等于3的值,以确保它们的层级高于fixed元素。\[1\]然而,对于原生组件(如textarea、input)来说,它们的层级是最高的,无论其他非原生组件的z-index设置多大,都无法覆盖在原生组件上。\[2\]因此,解决这个问题的方法是将textarea替换为text文本框,这样就可以避免层级穿透问题。但是当用户正在输入时,滚动页面会显示textarea,此时仍然存在穿透显示问题。\[3\]所以,最上层的z-index不起作用是因为原生组件的层级最高,无法被其他元素覆盖。
#### 引用[.reference_title]
- *1* [ios 系统中 position: fixed 和 z-index](https://blog.csdn.net/weixin_41697143/article/details/108492044)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [小程序 textarea、input 层级过高,导致填写内容穿透,z-index无效问题解决方案。](https://blog.csdn.net/qq_38307825/article/details/81241301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文