Блог

Главная - Вопросы по программированию - Наложение всей страницы, кроме одного элемента

Наложение всей страницы, кроме одного элемента

#css #angular #angular-cdk #angular-flex-layout

#css #angular #angular-cdk #angular-flex-layout

Вопрос:

Я использую Angular flex layout и в основном пользовательский CSS для макета, и я пытаюсь найти способ создать эффект наложения, который покрывает всю страницу, кроме одного элемента. Моей первоначальной мыслью было использовать библиотеку наложения CDK для создания эффекта. Но для этого требуется, чтобы вы включили ng-шаблон на страницу, в которой находится контент, который вы хотите отобразить.

То, что я хочу сделать, это просто показать наложение поверх всего, кроме указанного элемента, а не только того, что находится в ng-template. Я понимаю, что это может быть невозможно, поэтому моя вторая мысль, возможно, каким-то образом вы могли бы создать «виртуальный» элемент, который находится в том же положении, что и тот, который вы хотите наложить, но будет выглядеть так, как будто наложение покрывает все, кроме указанного элемента.

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

https://stackblitz.com/edit/angular-ivy-aftubj

Ответ №1:

Я бы попробовал что-то вроде этого: оберните ваш целевой элемент div. Оболочка будет иметь тот же CSS display -тип, что и ваш элемент (block, inline-block, …) и position: relative . Когда вы показываете наложение, установите ширину и высоту оболочки на ее текущий размер (чтобы сохранить макет неизменным), а ваш целевой элемент должен быть position: absolute; z-index: выше, чем overlay . Отмените изменения при скрытии наложения. Если ваш целевой элемент имеет фиксированные размеры, вы можете избежать динамической настройки этих значений.

 window.addEventListener('load', () => {
  document.getElementById('hide-button').addEventListener('click', () => {
    document.getElementById('overlay').style['display'] = 'none';
  });
}); 
 #overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: gray;
  opacity: 0.5;
  z-index: 1;
}

.wrapper {
  border: 1px solid green;
  position: relative;
  margin: 4rem;
}

.target-element {
  background-color: white;
  position: absolute;
  z-index: 2;
}

.wrapper, .target-element {
  width: 15em;
  height: 1.5em;
} 
 <!DOCTYPE html>
<html>
<body>
  <h1>Overlay playground</h1>
  <div class="wrapper">
    <div class="target-element">
      This should stay above the overlay.
    </div>
  </div>
  <div id="overlay">
    <button id="hide-button" style="margin: 2rem 0 0 20rem">Hide overlay</button>
  </div>
</body>
</html>

Комментарии:

1. Я использую angular flex и angular cdk overlay, поэтому я не могу просто изменить положение элементов, не нарушая макет. Это может быть достаточно просто для встроенного содержимого, например, в области содержимого, но если бы я применил это к левой навигации в моем stackblitz, например, это все испортило.

Метки: ,