hELLO 스킨 수정, 삭제 버튼의 정상적인 위치에 클릭 안되는 이슈

위 부분처럼 카테고리, 수정, 삭제, 비공개 버튼이 있는데

 

스크롤을 내리면 해당 부분이 클릭이 정상적으로 안돼서 굉장히 불편한 이슈가 생겼다.

 

CSS나 html에는 전혀 문외한이기에 AI의 도움을 받았다.

 

처음엔 자꾸 안되는 것들만 똑같은 내용으로 반복해서 알려주길래, 해본 것은 주지 말라고 했더니 

 

시도 해보지 않은 것들이라며 제시해줬다.

 

 

/* 수정/삭제 버튼 클릭 보장 */
#tistoryEtcLayer {
    z-index: 99999 !important;
    pointer-events: auto !important;
}

#tistoryEtcLayer .btn_mark {
    z-index: 100000 !important;
    pointer-events: auto !important;
    padding: 1.2rem !important;
    position: relative !important;
}

/* 잠재적 오버레이 비활성화 (사이드바, 코드블록 제외) */
body > div:not(#tistoryEtcLayer):not(.sidebar):not(#sidebar):not([class*="code"]),
body > section:not(.sidebar):not(#sidebar):not([class*="code"]),
.overlay,
[class*="modal"],
[class*="popup"] {
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 사이드바 스크롤 복구 */
aside, .sidebar, #sidebar {
    pointer-events: auto !important;
    z-index: 10 !important;
    overflow-y: auto !important;
}

/* 코드블록 스크롤 활성화 (단일 스크롤) */
pre {
    overflow: hidden !important; /* pre 스크롤 제거 */
    max-height: none !important;
    position: relative !important;
}

.code-body {
    pointer-events: auto !important;
    z-index: 10 !important;
    overflow-y: auto !important;
    max-height: 500px !important; /* 스크롤 높이 */
    position: relative !important;
}

.code-body .line {
    pointer-events: auto !important;
}

/* 복사 버튼 및 헤더 */
.code-header, .copy-btn {
    pointer-events: auto !important;
    z-index: 100 !important;
}

 

CSS 맨 밑부분에 추가해줬더니 잘 동작하고 아직까진 다른 문제는 확인 못했다.

 

사이드바도 정상적으로 스크롤 되고, 코드블럭도 해결됐다.

 

솔직히 근본적인 해결책이 아닌 주먹구구 식이긴해도 해결됐으니까 ok아닐까.. 

 

혹여 저와 똑같은 증상을 가지고 계신데 이 글을 보고 어느정도 해결하셨다면

+ 안되는 부분이 발견되면 공유해주세요!

 

AI는 grok 을 사용했다. 유료로 써볼까?