`top`, `left`, `bottom` 또는 `right`를 설정하지 않고 `position:absolute`를 사용할 수 있습니까?

Position: Absolute(위/왼쪽/아래/오른쪽 설정 없음)

CSS에서 position:absolute 속성을 사용하면 일반 문서 흐름에서 요소를 제거할 수 있습니다. , 컨테이너를 기준으로 절대적으로 위치를 지정합니다. 그러나 때로는 위쪽, 왼쪽, 아래쪽 또는 오른쪽 속성에 대해 명시적인 값을 설정하지 않고 위치: 절대값을 사용하고 싶을 수도 있습니다.

사례 #1:

이 접근 방식이 가능한 한 가지 시나리오 동일한 컨테이너 내의 다른 요소를 기준으로 요소를 배치하려는 경우 유용합니다. 예를 들어, 아래 HTML 및 CSS 예시에서 설명한 것처럼 헤더의 사진 위에 로고를 배치할 수 있습니다.

<a>

#logo {
  position: absolute;
  margin: 10px;
  /* or padding: 10px; */
  /* or border: 10px solid transparent; */
}

이 예시에서는 위치를 지정하지 않고 절대 위치를 설정합니다. top 값은 사진의 상단 여백을 기준점으로 사용하여 사진 위에 10px 로고를 배치합니다.

사례 #2:

이 기술이 유용할 수 있는 또 다른 사례는 테이블 작업을 할 때입니다. 기반 레이아웃. 예를 들어, 컨테이너의 전체 너비에 걸쳐 있는 수평 다중 레벨 메뉴를 생성할 수 있습니다. 테이블 셀은 position:relative를 지원하지 않으므로 아래와 같이 위쪽/왼쪽/아래/오른쪽 값 없이 position:absolute를 사용할 수 있습니다.

<table>

#menu td {
  position: absolute;
  height: 100%;
  width: 100%;
}

이 시나리오에서는 position:absolute 속성이 사용됩니다. 추가 값 없이 표 경계를 기준으로 표 내 각 셀의 위치를 ​​지정하여 완벽하게 정렬되는 완전한 다단계 메뉴를 만들 수 있습니다.

CSS 표준에 따르면:

일반적으로 CSS 사양에는 위쪽/아래쪽 또는 왼쪽/오른쪽 속성이 자동으로 설정된 경우 기본적으로 요소의 위치(정적 값)가 지정되어야 한다고 명시되어 있습니다. 그러나 상단/왼쪽/하단/오른쪽 값을 명시적으로 설정하지 않고 브라우저 구현에 따라 절대 위치 지정 지원이 다를 수 있다는 점에 유의하는 것이 중요합니다.

위 내용은 `top`, `left`, `bottom` 또는 `right`를 설정하지 않고 `position:absolute`를 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!