Overflow-y에 대한 솔루션: CSS에서 작동하지 않습니다.

이 문서의 내용은 CSS에서 Overflow-y: visible; not works에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Scenario

최근 요구 사항은 모바일 측의 h5 페이지에 대한 것으로, 컨테이너 너머로 왼쪽 및 오른쪽으로 밀어 넣을 수 있는 선택 가능한 카드 행과 각 카드의 왼쪽 상단에 삭제 버튼이 필요합니다. 아래와 같이 생각했습니다.

쉽게 max-width: 200px; nowrap; Overflow-x: auto;를 추가하면 완료됩니다. 데모는 다음과 같습니다.

<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>

.container {
  max-width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}

.son {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  margin-right: 20px;
}

.delete_btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  transform: translateX(-50%) translateY(-50%);
}

모든 것이 잘되었다고 생각했는데 결과는 아래와 같습니다.

사각형의 왼쪽 상단에 있는 빨간색 사각형을 보세요. 원래는 20 * 20이 숨겨져 있습니다. Overflow가 원인인 줄 알고 Overflow-y: visible; 을 사용해 해결해 보았으나 소용이 없었습니다. 신중한 친구들은 오버플로의 기본값이 표시된다는 점을 기억해야 합니다. 그렇다면 이유는 무엇입니까?

Why

오랜 시간 동안 검색해본 결과 다음과 같은 이유가 대략적으로 이해되었습니다.

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

대략적인 의미는 Overflow-x가 스크롤 또는 자동일 때 Overflow-y가 자동으로 설정되고 그 반대의 경우도 마찬가지라는 것입니다. 너무 당황스러운데, 이 문제를 어떻게 해결해야 할까요?

ps: 위 문단은 w3c 문서에서 따온 것인데, 오랫동안 검색해서 원문을 찾을 수가 없네요. 찾으시면 링크 남겨주세요~ [수동개머리]

How

결국, 나는 여전히 왼쪽 상단 모서리가 완전히 표시되기를 원합니다. 그렇다면 해결책은 무엇입니까? 여기서 사용하는 것은 container

padding-top: 20px;
margin-top: -20px;

에 다음 스타일을 추가하는 것입니다. 패딩 탑을 추가한 후의 원리는 실제로 매우 간단합니다. 20px;, 절대 위치에 있는 빨간색 사각형에는 표시할 공간이 있으며, 그림에 표시된 대로 margin-top: -20px;를 사용하여 위치 변경을 상쇄합니다.

ps: 첫 번째 빨간색 사각형의 왼쪽에 가려진 부분은 동일한 아이디어로 해결됩니다. 즉, padding-left 및 margin-left를 통해 처리됩니다. 관련 권장 사항:

iframe 이중 스크롤 막대 솔루션 CSS3 Overflow-y attribute_html/css_WEB-ITnose

HTML 태그 오버플로 처리 application_HTML/Xhtml_웹 페이지 제작

위 내용은 Overflow-y에 대한 솔루션: CSS에서 작동하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!