Я делаю некоторые стили CSS в React / Electron.
У меня есть баннер с тостами, который падает сверху вниз. Это position: absolute
. Соседний компонент - кнопка, также position: absolute
.
Независимо от того, какие top
или padding
значения, которые я даю кнопке, ее кликабельная область равна всегда уничтожена, указатель исчезает примерно на полпути вниз.
Mac - по-прежнему можно нажимать, хотя указатель / курсор исчезает на полпути вверх. Здесь вы можете увидеть тост div (черный) под панелью инструментов .draggable (зеленый). Тогда кнопка сверху их обоих. Это должно быть кликабельным поверх тех. И это - это меняет цвет, если я наведусь и станет прозрачным.
![enter image description here](https://i.stack.imgur.com/fA9Vj.png)
Win - кликабельно только в нижней половине кнопки. И эффект наведения происходит только для нижней его половины.
Я пробовал много разных подходов (z-index'ing, добавление цветов фона, чтобы убедиться, что он не перекрывается чем-то другим, увеличение заполнения и т. Д.) *
Что я здесь не вижу?
Есть ли что-то еще, что нужно отключить в Electron, настройке панели инструментов Windows?
Вот мой код:
function CustomMessageNotification({ content, dismiss }) {
return (
<div>
<div className={sharedStyles.toast}>
<div className={sharedStyles.toastMessageContainer}>
<div className={sharedStyles.toastMessage}>
{checkFori18nSupport(content)}
</div>
</div>
</div>
here is the button that needs to be totally clickable
<Button
id="dismissButton"
className={sharedStyles.actionButton}
onClick={dismiss}
>
<FormattedMessage {...sharedMessages.dismiss} />
</Button>
</div>
);
}
CSS:
.toast {
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
display: inline-flex;
justify-content: space-between;
align-items: baseline;
padding: 10px;
width: calc(100% - 208px);
}
.actionButton {
display: inline-block;
z-index: 1000;
margin-right: 10px;
background-color: red;
position: absolute;
top: 0;
right: 0;
z-index: 1000;
padding: 10px 20px 20px;
cursor: pointer;
}