HTML 요소의 위치는 웹 페이지 구성 요소를 구성하는 데 중요한 역할을 합니다. 보다 구체적으로 CSS '를 활용하여 요소의 위치를 조정할 수 있습니다. 위치 ' 특성. 이 속성은 위쪽, 왼쪽, 오른쪽 및 아래쪽 속성과 같은 오프셋 속성과 연결되어 페이지의 요소를 조정하는 특정 값을 제공할 수 있습니다. 그러나, 그 ' 순수한 ” 배치된 요소는 가장 가까운 배치된 요소를 기준으로 조정할 수 있습니다.
이 게시물에서는 CSS 절대 위치 지정에 대해 설명합니다.
CSS '위치' 속성
“ 위치 ” CSS의 속성을 활용하여 요소의 위치를 조정할 수 있습니다. 위치 속성의 다른 값은 고정, 절대, 상대, 정적 및 고정입니다. 이러한 값은 요소의 위치를 조정하기 위해 위쪽, 오른쪽, 왼쪽 및 아래쪽과 같은 오프셋 속성으로 설정됩니다.
CSS 절대 위치 지정을 적용하는 방법?
요소의 절대 위치 지정은 CSS ' 위치 ' 값이 '인 속성 순수한 '. 절대 위치가 있는 요소는 가장 가까운 위치에 있는 상위 요소에 따라 조정됩니다. 그러나 조상이 배치되지 않은 경우 문서의 본문 섹션을 기준으로 조정됩니다.
예시
실제 예를 들어 개념을 이해해 봅시다.
1단계: HTML 파일 만들기
HTML 파일의 body 요소 내에서 클래스 이름이 '인 div를 추가합니다. 기본 '. 그런 다음 생성된 div 내부에 다음 속성과 연결된 HTML 태그를 추가합니다.
-
- “ 소스 ”는 이미지에 대한 링크를 제공합니다.
- “ 수업 ”는 CSS에서 요소의 스타일을 지정하는 데 사용됩니다.
- “ 모든 것 ” 속성은 이미지가 페이지에 로드되지 않는 경우 이미지 대신 표시되는 텍스트를 지정합니다.
- “ 모든 것 ” 속성은 이미지가 페이지에 로드되지 않는 경우 이미지 대신 페이지에 표시되는 텍스트를 지정합니다.
그런 다음 제목과 단락의 h1 및 p 요소를 포함하는 다른 div를 추가합니다.
< 사업부 수업 = '기본' >< 사업부 수업 = '콘텐츠' >
< 이미지 소스 = '이미지/linuxlogo.png' 수업 = '집' 모든 것 = '리눅스 로고' 너비 = '80픽셀' >
< h1 > CSS 절대 포지셔닝 h1 >
< 피 > 안녕하세요 Linuxhint 팀 ! 피 >
사업부 >
사업부 >
CSS에서는 여러 스타일 속성을 사용하여 HTML 요소를 장식합니다.
2단계: '모든' 요소 스타일 지정
* {font-family: Verdana, Geneva, Tahoma, sans-serif;
}
HTML 요소는 ' 글꼴 모음 ' 값이 '인 속성 Verdana, Geneva, Tahoma, 산세리프 '. 이 값 목록은 브라우저가 첫 번째 스타일을 지원하지 않는 경우 다른 스타일이 적용되도록 합니다.
3단계: 'home' div 스타일 지정
.집 {위치: 절대;
상단: 50px;
왼쪽: 45px;
}
다음은 '에 적용되는 속성입니다. 집 ” 사업부:
-
- “ 위치 ” 속성은 요소의 위치를 설정합니다. 여기에 추가된 ' 순수한 ”는 HTML의 본문 섹션을 기준으로 요소를 배치합니다.
- “ 맨 위 ” 속성은 요소의 수직 조정에 활용됩니다.
- “ 왼쪽 ” 속성은 요소의 수평 조정에 사용됩니다.
4단계: '콘텐츠' div 스타일 지정
.콘텐츠 {배경색: cadetblue;
너비: 300px;
높이: 250px;
패딩-왼쪽: 40px;
여백-왼쪽: 80px;
}
다음은 '에 적용되는 CSS 속성입니다. 콘텐츠 ” 사업부:
-
- “ 배경색 ” 속성은 요소의 배경색을 설정합니다.
- “ 너비 ” 속성은 요소의 너비를 설정합니다.
- “ 키 ” 속성은 요소의 높이를 설정합니다.
- “ 패딩 왼쪽 ” 속성은 요소 콘텐츠의 왼쪽에 공간을 추가하도록 설정됩니다.
- “ 여백 왼쪽 ” 속성은 요소의 왼쪽 공간을 지정합니다.
이 시점에서 웹 페이지는 다음과 같습니다.
위의 결과에서 div 홈의 이미지가 문서 본문의 상단에서 50px, 왼쪽에서 45px 위치에 있음을 알 수 있습니다. 또한 홈 div의 위치는 HTML의 본문 섹션을 기준으로 설정됩니다.
배치된 상위 요소에 '상대적으로' 요소 위치를 조정하는 방법은 무엇입니까?
이 섹션에서는 가장 가까운 위치 상위 요소를 기준으로 요소의 위치를 조정하는 방법을 안내합니다.
'content' div의 'position' 속성 설정
위치: 상대적;
상위 요소를 기준으로 요소의 위치를 조정하려면 ' 위치 ” 부모 요소의 속성을 “ 상대적인 ' 값.
'img' 요소의 'position' 속성 설정
.집 {위치: 절대;
상단: 100px;
왼쪽: 220px;
}
여기:
-
- “ 위치 '로 설정된 값이 있는 속성 순수한 ”는 상위 요소를 기준으로 배치됩니다(즉, 콘텐츠 div 위치는 상대적인 값으로 설정됨).
- “ 맨 위 ” 속성은 요소 위치를 위에서부터 설정하는 데 사용됩니다.
- “ 왼쪽 ” 속성은 왼쪽에서 요소 위치를 설정하는 데 사용됩니다.
산출
결과에서 볼 수 있듯이 이미지가 부모 div를 기준으로 배치되었으며 적합해 보입니다.
결론
CSS ' 위치 ” 속성은 HTML 요소의 위치를 설정하는 데 활용됩니다. 이 속성은 고정, 상대, 절대, 고정 및 정적 값으로 평가할 수 있습니다. “ 순수한 ” 값은 근처에 배치된 상위 요소에 해당하는 요소를 배치합니다. 이 게시물은 실제 예제를 통해 CSS 절대 위치 지정을 설명했습니다.