# 카테고리 및 태그 브레드크럼 드롭다운 위치 문제

**URL:** https://meta.discourse.org/t/category-tag-breadcrumbs-dropdown-positioning-issue/272779
**Category:** Development
**Created:** [7월 25, 2023, 3:06오후 UTC](https://meta.discourse.org/t/category-tag-breadcrumbs-dropdown-positioning-issue/272779 "2023-07-25T15:06:44Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [7월 25, 2023, 3:06오후 UTC](https://meta.discourse.org/t/category-tag-breadcrumbs-dropdown-positioning-issue/272779/1 "2023-07-25T15:06:45Z")

</div>

안녕하세요! 커스텀 테마를 만들려고 "air theme"를 포크해서 몇 가지 수정을 했는데, 카테고리 및 태그 드롭다운 메뉴가 이상한 위치에 표시되는 것을 발견했습니다.

 ![Capture d’écran 2023-07-25 à 16.55.35](https://global.discourse-cdn.com/meta/original/4X/8/3/a/83aba076e32bfbac389c8b0560876c81788d5347.jpeg)

이것이 발생하는 원인이 무엇일지 아시나요? 제 테마에서 JS 관련 내용은 아무것도 변경하지 않았고, CSS만 수정했습니다. 제 코드는 여기서 확인하실 수 있습니다: [GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option. · GitHub](https://github.com/Decryptu/discourse-decrypt)

기본 "air theme"를 선택하면 드롭다운 메뉴가 올바른 위치에 표시되므로 제 테마에서 비롯된 문제일 것입니다. 또한 "transform"이나 “inset” 속성도 변경하지 않았습니다.

도움 주실 분을 기다리고 있습니다. 감사합니다!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 25, 2023, 3:23오후 UTC](https://meta.discourse.org/t/category-tag-breadcrumbs-dropdown-positioning-issue/272779/2 "2023-07-25T15:23:22Z")

</div>

이건 좀 예상치 못한 문제인데, 포지셔닝이 영향을 받는 것 같습니다.

```css
html body #main-outlet {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

```

이 줄들을 제거하면 제 환경에서는 문제가 해결됩니다.

사실 `backdrop-filter`는 CSS에서 새로운 블록 컨텍스트를 생성하는 것 같습니다. 더 자세한 정보는 여기에서 확인하세요… [https://stackoverflow.com/a/52937920/1869753](https://stackoverflow.com/a/52937920/1869753)

> 즉, `position:fixed` 요소가 뷰포트가 아닌 필터가 적용된 컨테이너를 기준으로 상대적으로 위치하게 됩니다. 다시 말해, 여전히 고정(fixed) 상태이지만 _새로운_ 포함 블록(필터가 적용된 컨테이너) 안에 위치하게 되는 것입니다.

---

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [7월 25, 2023, 3:24오후 UTC](https://meta.discourse.org/t/category-tag-breadcrumbs-dropdown-positioning-issue/272779/3 "2023-07-25T15:24:49Z")

</div>

와, 정말 감사합니다! 그걸 제거해야 할 줄은 꿈에도 몰랐어요. 제거해서 배경 흐림 효과를 대체할 방법을 찾아보겠습니다. 정말 감사합니다.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [8월 24, 2023, 3:25오후 UTC](https://meta.discourse.org/t/category-tag-breadcrumbs-dropdown-positioning-issue/272779/4 "2023-08-24T15:25:30Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
