CSS의 위치 위치 지정 속성 사용 시 몇 가지 핵심 사항

1.position:static

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

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

#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는 외부 하위 p가 있는 요소를 기반으로 합니다. 위치 지정은 상대적입니다.

6.clear:both Clear float
때때로 위치 지정이 축소됩니다. 즉, 하위 요소가 상위 요소에 있지만 상위 요소의 크기가 따르지 않습니다. 자식 요소 요소의 크기가 ""확장"되어 부모 요소가 축소되는 효과가 발생합니다. 이 버그는 자식 요소가 float 속성을 설정하여 부모 요소가 축소되기 때문에 발생합니다. 이 버그를 해결하려면 다음이 필요합니다. 상위 요소를 상위 요소로 설정합니다. 샘플 코드는 다음과 같습니다.

#p-1a 
{     
             float:left;     
             width:190px;     
 }     
            #p-1b
 {     
             float:left;     
             width:190px;     
 }     
            #p-1c
 {     
             clear:both;     
 }

CSS 위치 지정 사용에 대한 자세한 내용은 다음과 같습니다. 속성이 있으니 PHP 중국어 홈페이지를 주목해주세요! >