Изменение непрозрачности кнопки приводит к ее отображению над родительскими элементами

Question

Я разрабатываю страницу конфигурации с использованием React. У меня есть список настраиваемых элементов, которые отображаются в таблице, и кнопка «Сохранить» отключена и становится прозрачной до тех пор, пока поле данных не будет изменено, после чего кнопка станет активной и станет полностью непрозрачной.

Однако, когда кнопка находится в отключенном состоянии, кнопки отображаются поверх родительских элементов, таких как липкий заголовок таблицы и панель навигации. Это становится очень очевидным при прокрутке. Включение кнопок устраняет проблему и больше не отображается на родительских элементах.

В настоящее время я использую компонент Button-bootstrap Button для рендеринга кнопки, но использование обычной кнопки HTML приводит к тем же результатам. Также кажется, что как отключение кнопки, так и самостоятельное изменение поля непрозрачности также вызовут проблему.

<td className="saveButton">  
  <Button
    variant="primary"
    id={this.props.id}
    disabled={!this.state.modified} //Only enable saving after data has been modified
    style={this.state.modified ? {opacity: 1} : {opacity: 0.3}}
    onClick={this.updateListItem}
  >Save</Button>
</td>

Кнопки должны исчезнуть под липким заголовком таблицы и панелью навигации с остальной строкой таблицы, нокнопки, находящиеся в отключенном состоянии, в конечном итоге отображаются поверх, например:

(обратите внимание, что активированная кнопка правильно прокручивается под заголовком таблицы)

Есть идеи, где я ошибся?

Answer 1

Мне удалось воспроизвести вашу ошибку с помощью основного макета таблицы, используя липкий заголовок. Если вы откомментируете z-index в th, вы увидите, что это решает проблему. https://codepen.io/sallf/pen/BaaBwmR

Вы только показали кнопку внутри таблицы, поэтому я не знаю точно, как настроена ваша таблица, но это кажется вероятным решением.

th {
  position: sticky;
  top: 0;
  background: white;
  // Remove z-index and td will appear
  // to be over the td
  z-index: 1;
}

Относительно того, почему это происходит, я действительно нея знаюМне кажется, что это ошибка в браузере, но было бы любопытно, если бы кто-нибудь знал больше.