CSS 위치 지정 기술

이 기사에서는 일반적으로 사용되는 CSS의 6가지 속성을 살펴봅니다. 이 기사에는 누구나 만족할 것입니다.

1.position:static

static 속성은 position의 기본값입니다. 즉, 요소에 position 속성이 설정되어 있지 않은 경우입니다. 기본값은 정적입니다.

2.position:absolute

자주 사용되는 위치 속성 값입니다. 요소에 절대값이 설정된 경우 해당 요소는 원본 문서 흐름에서 분리됩니다. 예를 들어 a 요소를 position:absolute로 정의하면 이 요소는 페이지의 다른 요소와 위치 관계를 갖지 않지만 전체 페이지 위에 떠 있게 됩니다. 페이지 내 다른 요소의 위치, 크기 등이 변경되더라도 아웃사이더에 해당하는 a 요소의 위치에는 영향을 미치지 않습니다.

3.position:relative

relative가 가장 유용한 정의 방법입니다. 상대 속성을 설정하면 원래 위치를 기준으로 요소의 변경이 표시됩니다. 예를 들어, b 요소를 정의하고 여기에 다음 CSS 스타일을 설정합니다.

#b{     
    position: relative;     
    width:100px;     
    height:100px;     
    top:100px;     
}

이 코드에서 정의한 b 요소의 위치는 위치 속성이 아닌 위치를 기준으로 합니다. 100px 아래로 이동합니다. 상대 속성 값의 정의는 이러한 위치 지정 모드입니다.

4.position:fixed

고정 위치 지정은 많이 사용되지 않지만, 톱 메뉴 등 고정 모드 부품 제작에 매우 적합합니다. 고정 속성을 정의한 후에는 요소의 위치가 어떤 동작으로도 변경되지 않습니다.

5. 상대+위치

이 두 위치를 동시에 사용하는 것은 매우 일반적인 기술이며 여기서 초보자도 많은 어려움을 겪을 수 있습니다. 일반적으로 요소가 절대 위치에 있는 경우 해당 요소는 자신과 가장 가까운 요소가 상대 위치로 설정되어 있는지 여부에 따라 참조됩니다. 설정이 있으면 자신과 가장 가까운 요소로 배치됩니다. html을 찾을 때까지 상대적으로 위치가 지정된 요소의 조상 요소에 적용됩니다. 예를 들어, 다음 코드는 두 가지의 조합을 사용하여 2열 레이아웃을 구현합니다.

<span style="white-space:pre">    </span>#p-1 {     
             position:relative;     
            }     
            #p-1a {     
             position:absolute;     
             top:0;     
             rightright:0;     
             width:200px;     
            }     
            #p-1b {     
             position:absolute;     
             top:0;     
             left:0;     
             width:200px;     
            }

내부의 두 하위 p는 외부 위치 지정이 있는 요소를 기반으로 절대 위치가 지정됩니다. 상대적이다.

6.clear:both Clear float

때때로 위치 지정이 축소됩니다. 즉, 하위 요소가 상위 요소에 있지만 상위 요소의 크기가 하위 요소는 하위 요소의 크기에 따라 "확장"되어 상위 요소의 축소 효과가 발생합니다. 이 버그는 하위 요소가 float 속성을 설정하여 상위 요소가 축소되기 때문에 발생합니다. 이 버그를 해결하려면 상위 요소에 대해 명확한 부동 소수점을 설정해야 합니다. 샘플 코드는 다음과 같습니다.

<span style="white-space:pre">    </span>    #p-1a {     
             float:left;     
             width:190px;     
            }     
            #p-1b {     
             float:left;     
             width:190px;     
            }     
            #p-1c {     
             clear:both;     
            }

위는 CSS 위치 지정에서 일반적으로 사용되는 6가지 속성에 대해 학습한 것입니다. . 모든 분들께 도움이 되기를 바랍니다.

CSS 위치 지정 기술과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요