새 행에 절대 렌더링 버튼을 배치하는 방법은 무엇입니까?

웹 페이지에서 요소의 위치를 ​​제어하려면 position CSS 속성을 사용해야 합니다. 문서에서 요소의 위치를 ​​정의하는 속성은 필수적이며 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성과 위치는 네 가지 속성을 모두 설정하는 데 사용할 수 있는 약식 속성입니다.

아래는 위치 속성과 함께 사용할 수 있는 가능한 값을 지정합니다. -

• Static - 문서의 자연스러운 흐름에 따라 요소가 배치됩니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 또는 Z-색인 속성에는 차이가 없습니다. 이것이 기본 옵션입니다.

• 상대- 요소는 문서의 자연스러운 흐름에 따라 배치되며 요소 자체에 대한 오프셋은 위쪽, 오른쪽, 아래쪽 및 왼쪽 값에 따라 결정됩니다. 오프셋이 다른 요소의 위치에 영향을 주지 않기 때문에 페이지 레이아웃의 요소에 할당된 공간은 위치가 정적일 때와 동일합니다.

  z-index 값이 auto가 아닌 경우 이 값은 새로운 스택 컨텍스트를 설정합니다. 테이블-*-그룹, 행, 열, 셀 및 테이블 캡션의 요소에 영향을 미치는 방식은 정의되지 않습니다.

• 물론입니다- 이 요소는 일반적인 문서 흐름에서 제거되었으며 페이지 레이아웃에 사용할 공간이 없습니다. 그렇다면 해당 조상과 연관시키고, 그렇지 않다면 첫 번째 포함 블록을 기준으로 배치하십시오. 상단, 오른쪽, 하단 및 왼쪽 값은 최종 위치를 정의합니다.

  z-index 값이 auto가 아닌 경우 이 값은 새로운 스택 컨텍스트를 설정합니다. 절대 위치 지정은 상자의 여백이 다른 여백과 겹치는 것을 방지합니다.

• FIXED - 요소가 일반적인 문서 흐름에서 제거되었으며 페이지 레이아웃에 해당 요소를 위한 공간이 없습니다. 상위 항목 중 하나에 없음이 아닌 다른 값으로 설정된 변환, 관점 또는 필터 속성이 있거나(CSS 변환 사양 참조) will-change 속성이 변환으로 설정된 경우를 제외하고, 이 경우 상위 항목은 포함 블록으로 작동합니다. 그렇지 않으면 뷰포트에 의해 설정된 초기 포함 블록을 기준으로 위치가 지정됩니다. (브라우저 간 시야각 및 필터 차이로 인해 블록이 닫힐 수 있습니다.) 상단, 오른쪽, 하단 및 왼쪽 값이 최종 위치를 정의합니다.

• Sticky - 요소는 문서의 자연스러운 흐름에 따라 배치된 다음 해당 요소의 가장 가까운 스크롤 상위 요소 및 포함 블록(가장 가까운 블록 수준 상위 요소)을 기준으로 위쪽, 오른쪽 값을 기준으로 오프셋됩니다. , 하단 및 좌측, 표 관련 요소를 포함합니다. 다른 요소의 위치는 오프셋의 영향을 받지 않습니다.

  새 스택 컨텍스트는 항상 이 값으로 생성됩니다. 고정 요소는 "스크롤 메커니즘"(오버플로가 숨겨지거나 스크롤되거나 자동 또는 재정의될 때 생성됨)이 있는 가장 가까운 조상에 "고착"된다는 점에 유의해야 합니다. 해당 조상이 실제 가장 가까운 조상이 아니더라도 마찬가지입니다. 스크롤.

상대적이고 절대적인 위치에 있는 요소

상대 위치 요소는 계산된 위치로 "상대"를 사용하는 요소를 나타내고, 절대 위치 요소는 계산 위치를 "절대" 또는 "고정"으로 사용하는 요소를 나타냅니다.

상대 위치 지정 예

아래는 상대 위치 지정을 사용한 샘플 코드입니다.

으아아아

절대 위치 지정 예

아래는 절대 위치 지정을 사용한 샘플 코드입니다.

으아아아

절대 위치 지정을 사용하여 새 줄에 버튼 렌더링

이제 우리는 위치 지정이 작동하는 방식과 CSS에서 절대 위치 지정을 사용하는 방법을 이해했습니다. 우리는 당면한 문제를 해결하기 위해 우리의 지식을 적용할 것입니다.

예

다음은 CSS에서 절대 위치 지정을 사용하여 새 행에 버튼을 렌더링하는 예입니다.

으아아아

결론

요약하자면, 배치된 요소를 사용하면 페이지에서 정확한 위치를 지정하여 새 행에 버튼을 렌더링할 수 있습니다. 요소의 "위치" 속성을 "절대"로 설정한 다음 배치하려는 정확한 위치를 나타내는 위쪽, 왼쪽, 오른쪽 또는 아래쪽 속성에 값을 제공하면 됩니다. 올바르게 사용하면 절대 위치 지정을 통해 최소한의 노력으로 깔끔한 레이아웃을 만들 수 있습니다.

위 내용은 새 행에 절대 렌더링 버튼을 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!