절대 위치 지정의 공통 속성 값을 배우고 고유한 웹 페이지 레이아웃을 만듭니다.

절대 위치 지정의 공통 속성 값을 배우고 고유한 웹 페이지 레이아웃을 만들기 위해서는 구체적인 코드 예제가 필요합니다.

1. 소개
오늘날 웹 디자인은 사람들의 일상 생활의 일부가 되었습니다. 웹 페이지 레이아웃을 더욱 독특하고 아름답게 만들기 위해 CSS의 절대 위치 지정 속성을 사용할 수 있습니다. 이 글에서는 절대 위치 지정의 공통 속성 값을 소개하고, 독자들이 이를 더 잘 배우고 적용할 수 있도록 코드 예제를 제공합니다.

2. 절대 위치 지정의 개념과 기능
절대 위치 지정은 웹 페이지의 지정된 위치에 요소를 정확하게 배치할 수 있는 CSS의 위치 지정 방법입니다. 다른 위치 지정 방법과 비교하여 절대 위치 지정은 독립적이며 문서 흐름에서 분리될 수 있습니다. 즉, 절대 위치에 있는 요소는 다른 요소가 변경되더라도 특정 위치에 유지됩니다.

3. 일반적으로 사용되는 절대 위치 지정 속성 값 ​​

1. top, right, Bottom, left:
2. top: 상위 컨테이너 상단을 기준으로 요소 상단 사이의 거리를 지정합니다. 상위 컨테이너의 오른쪽을 기준으로 요소의 오른쪽 거리
3. bottom: 상위 컨테이너의 하단을 기준으로 요소의 하단으로부터의 거리를 지정합니다.
4. left: 왼쪽으로부터의 거리를 지정합니다. 상위 컨테이너의 왼쪽을 기준으로 한 요소의 위치입니다.
5. 다음 코드 예제에서는 위쪽 및 왼쪽 속성을 통해 절대 위치 지정을 수행하는 방법을 보여줍니다.

<style>
#myElement {
    position: absolute;
    top: 50px;
    left: 100px;
}
</style>
<div id="myElement">
    我是一个绝对定位的元素
</div>

z-index:

2. z-index는 더 높은 z-index 값을 사용하여 요소의 수직 스택 순서를 제어할 수 있습니다. 요소는 더 낮은 값을 가진 요소를 재정의합니다.
3. 다음 코드 예제에서는 Z-색인 속성을 사용하여 두 개의 절대 위치 지정 요소를 쌓는 방법을 보여줍니다.

<style>
#element1 {
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: green;
    z-index: 1;
}
#element2 {
    position: absolute;
    top: 150px;
    left: 150px;
    background-color: red;
    z-index: 2;
}
</style>
<div id="element1">
    我是元素1
</div>
<div id="element2">
    我是元素2
</div>

위치: 상대

3. 상대 위치 지정은 요소 위치를 상대적으로 지정할 수 있도록 하는 절대 위치 지정에 대한 보완 속성 값입니다. 자체 위치에 있고 여전히 문서 흐름 내에 남아 있습니다.
4. 다음 코드 예제는 상대 위치 지정을 사용하여 절대 위치 지정을 달성하는 방법을 보여줍니다.

<style>
#parent {
    position: relative;
    width: 400px;
    height: 300px;
    background-color: lightgray;
}
#child {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<div id="parent">
    <div id="child">
        我是一个相对定位的元素
    </div>
</div>

4. 요약

절대 위치 지정은 고유한 웹 페이지 레이아웃을 달성하는 중요한 도구 중 하나입니다. 절대 위치 지정의 공통 속성 값을 마스터함으로써 요소를 지정된 위치에 정확하게 배치하고 스택 순서를 제어할 수 있습니다. 이 기사에 제공된 코드 예제가 독자가 절대 위치 지정 관련 지식을 더 잘 이해하고 적용하여 독특하고 멋진 웹 페이지 레이아웃을 만드는 데 도움이 되기를 바랍니다.

위 내용은 절대 위치 지정의 공통 속성 값을 배우고 고유한 웹 페이지 레이아웃을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!