CSS를 사용하여 요소를 맨 앞으로 가져오기
요소가 전체 디스플레이 영역을 덮도록 설정되지 않은 경우 z-index 속성을 사용하여 전면으로 가져올 수 있습니다. z-index 속성은 페이지에서 요소의 스택 순서를 결정합니다.
z-지수가 더 높은 요소는 z-지수가 더 낮은 부품의 뚜껑에 쌓입니다.
CSS를 사용하여 요소를 전면으로 가져오기
CSS를 사용하여 요소를 맨 앞으로 가져오는 방법에는 여러 가지가 있습니다. 첫 번째 방법은 요소의 z-order를 지정하고 어떤 요소가 위에 쌓일지 결정하는 z-인덱스 속성을 사용하는 것입니다.
z-index가 높은 요소는 항상 z-index가 낮은 요소 위에 쌓입니다. 따라서 요소를 맨 앞으로 가져오려면 페이지의 다른 요소보다 더 높은 z-index를 지정해야 합니다.
요소를 앞으로 가져오는 또 다른 방법은 position 속성을 사용하는 것입니다.
요소에 위치 값이 절대 또는 상대적이라고 가정합니다. 이 경우 z-index 속성을 페이지의 다른 요소보다 큰 값으로 설정하여 쇼에 가져올 수 있습니다.
마지막으로 transform 속성을 사용하여 요소를 맨 앞으로 가져올 수 있습니다. transform 속성을 사용하면 요소를 변환, 회전, 크기 조정 및 기울일 수 있습니다.
요소를 맨 앞으로 가져오려면 페이지의 다른 요소보다 큰 값으로 요소를 번역합니다.
CSS에 z-index 추가
CSS z-index 속성은 드롭다운 메뉴를 만들거나 페이지의 일부 측면이 항상 표시되도록 하는 데 유용할 수 있습니다.
z-인덱스에 대해 설정한 값은 레이어 순서에서 요소의 위치를 결정합니다. 예를 들어 z-index를 1로 설정하면 요소가 맨 아래 레이어에 배치되고 z-index를 10으로 설정하면 요소가 맨 위 레이어에 배치됩니다.
z-index: -1;
z-index 속성은 position 값이 absolute, relative 또는 fixed인 요소에서만 작동한다는 점을 기억하세요. 위치 값이 정적인 요소에서 z-인덱스를 사용하려고 하면 효과가 발생하지 않습니다.
Flexbox를 사용하여 요소에 z-index 추가
간단한 접근 방식은 flexbox를 사용하여 요소에 z-index를 추가하는 것입니다.
-
먼저 요소의
z-index를 플렉스 컨테이너에 있는 다른 요소의z-index보다 큰 값으로 설정해야 합니다. -
요소의
위치를절대로 선택합니다. -
마지막으로
top및left속성을0으로 설정해야 합니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="/img/DelftStack/logo.png" width="100" height="140" />
<p>Since the image has a z-index value of -1, it will be positioned behind the heading.</p>
</body>
</html>
효과를 보려면 img 태그 <img src="image.jpg" width="100" height="140">에 이미지를 추가해야 합니다.
결론
결론적으로 CSS를 사용하여 요소를 맨 앞으로 가져오는 몇 가지 방법이 있습니다. 표준 관행은 z-index 속성을 사용하는 것이지만 position 또는 transform 속성을 사용할 수도 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn