Материал пользовательского интерфейса InputBase не может быть скрыт другими элементами
Как показано ниже, первая строка — это липкая навигация, а все последующие строки — это компонент InputBase в material-ui. Хотя я уже установил белый цвет фона панели навигации, input всегда отображается над навигацией. И это странное поведение исчезло после того, как я сменил InputBase на свой кастомный div.
Вот живое демо: https://codesandbox.io/s/material-demo-forked-k2g5l
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что-то странное происходило с z-index. Кроме того, ваша липкая навигация не была полной ширины.
Я добавил zIndex: 9999, а также ширину 100%.
https://codesandbox.io/s/material-demo-forked-n87zv
Вот ревизия:
import React from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import { InputBase } from "@material-ui/core";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
"& > *": {
margin: theme.spacing(1),
width: "25ch"
}
},
main: {
overflowX: "auto",
height: "100px",
width: "100px"
},
nav: {
position: "sticky",
top: 0,
backgroundColor: "white",
zIndex: 9999,
width: "100%"
},
rows: {
display: "flex",
flexDirection: "column",
flexWrap: "nowrap"
}
})
);
export default function BasicTextFields() {
const classes = useStyles();
return (
<div className = {classes.main}>
<div className = {classes.nav}>NNNNNNNNNNNNNNNNNNNNNN</div>
<div className = {classes.rows}>
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
<InputBase placeholder = "xxxxxx" />
</div>
</div>
);
}
@BAKEZQ - не уверен, лол. Я также только что попытался проверить еще раз, и на этот раз я не видел, чтобы Z-Index отображался в инструментах разработчика Chrome. Однако в первый раз меня заинтересовало то, что Z-индекс был равен «1» для некоторого элемента.
Я также пытался установить для этого z-index значение 0 и установить значение 1 для навигации, но это не сработало. Узнал, что в следующий раз я должен попробовать более высокий z-индекс.
Я только что сделал 9999, поскольку я видел, как это делается довольно много раз в моей карьере веб-разработчика. Это просто ленивый способ настройки :)
Так что же на самом деле происходит? Я проверил в режиме Chrome dev и не нашел ничего, связанного с z-index