Как сохранить заставку над компонентами React
Я пытаюсь поместить заставку в свое приложение. Однако React отображает свои компоненты над заставкой.
Мой HTML выглядит так:
<div id='overlay'>
<img/>
</div>
<div id='root'></div>
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(36,79,53, 1);
z-index: 99;
}
#root{
height: 100vh;
z-index: 1;
}
Что еще я могу сделать?
Тот фрагмент, который вы разместили, мне нравится, у вас есть какие-нибудь стили на #root?
Извините, не похоже, что я могу помочь с тем, что дано, все, кажется, выстраивается правильно. Есть что-то помимо того, что вы опубликовали, что все портит. codepen.io/anon/pen/MdPgpV
Ответы 2
Я бы посоветовал вам создать реагирующий компонент, который будет отображаться как часть реагирующего приложения. Таким образом, вы можете программно контролировать, когда появляется перекрытие по отношению к остальной логике вашего приложения. Поскольку у вас уже есть CSS и разметка, вам просто нужно поместить их в компонент и отобразить.
React предлагает чистое решение именно для этого варианта использования: reactjs.org/docs/portals.html.
Спасибо, Роб. Я забыл упомянуть, что пытался поместить его в свое приложение. Я попытался поместить его в каждую позицию с другими загружаемыми компонентами, но все та же проблема.
@СакоБу Спасибо. Но я не уверен, что это делает то, что мне нужно. Оказывается, мне просто нужно было установить z-индекс для компонентов.
Я оставлю это на некоторое время, запустив фрагмент кода, вы увидите, что проблема не в опубликованном вами коде. Я сделал наложение немного прозрачным, чтобы вы могли видеть, что оно находится поверх красного текста ниже.
class Thingy extends React.Component {
render() {
const {title} = this.props;
console.info("rendered");
return (
<div className = "thingy">
<div>{title}</div>
</div>
);
}
}
// Render it
ReactDOM.render(
<Thingy title = "I'm the thingy" />,
document.getElementById("root")
);#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(36,79,53, .7);
z-index: 99;
}
#root{
height: 100vh;
z-index: 1;
}
.thingy{
color: red;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='overlay'>
<img/>
</div>
<div id='root'></div>Спасибо. Ваш ответ побудил меня взглянуть на z-индексы компонентов. Они вообще не были установлены, поэтому я установил их на 1, и все выглядит нормально.
Загляните на порталы React reactjs.org/docs/portals.html