css 요소 포 지 셔 닝

css 요소 포 지 셔 닝
1.position:static|포 지 셔 닝 없 음 position:static 는 모든 요소 포 지 셔 닝 의 기본 값 입 니 다.계승 을 취소 해 야 할 다른 포 지 셔 닝 이 있 는 경 우 를 제외 하고 밝 히 지 않 습 니 다.
example:#div-1 { position:static;}
2.position:relative|상대 적 인 포 지 셔 닝 은 position:relative 를 사용 하려 면 top,bottom,left,right 4 개의 속성 을 조합 하여 요소 의 위 치 를 확인 해 야 합 니 다.div-1 층 을 20px 아래로 이동 시 키 려 면 40px 를 왼쪽으로 이동 하 십시오.
example:#div-1 { position:relative; top:20px; left:40px;}
상대 적 인 포 지 셔 닝 을 사용 하면 그의 층 divafter 는 div-1 아래 에 나타 나 지 않 고 div-1 과 같은 높이 에 나타 납 니 다.

보 이 는 위치:relative;그다지 좋 지 않다.
3.position:absolute|절대 포 지 셔 닝 사용 position:absolute;,원 하 는 위치 로 요 소 를 정확하게 이동 할 수 있 습 니 다.div-1a 를 페이지 의 오른쪽 상단 으로 이동 시 킵 니 다.
example:#div-1a { position:absolute; top:0; right:0; width:200px;}
절대 포 지 셔 닝 의 div-1a 층 앞 이나 뒤의 층 을 사용 하면 이 층 이 존재 하지 않 고 그들 에 게 영향 을 주지 않 는 다 고 생각 할 것 이다.그래서 position:absolute;하나의 요 소 를 고정된 위치 에 두 는 것 은 좋 지만 div-1a 층 이 근처 층 에 비해 위 치 를 확인 해 야 한다 면 실현 되 지 않 습 니 다.*여기에 Win IE 의 bug 가 언급 해 야 할 것 은 절대적 으로 포 지 셔 닝 된 요소 에 상대 적 인 도 를 정의 하면 IE 에서 그 폭 은 전체 페이지 의 너비 가 아니 라 부모 요소 의 너비 에 달 려 있다 는 것 이다.
4.position:relative+position:absolute|절대 포 지 셔 닝+상대 포 지 셔 닝 부모 요소(div-1)를 position:relative 로 정의 하면;하위 요소(div-1a)를 position:absolute 로 정의 하면 하위 요소(div-1a)의 위 치 는 전체 페이지 가 아 닌 부모 요소(div-1)에 비해 정 의 됩 니 다.div-1a 를 div-1 의 오른쪽 상단 에 고정 시 키 기:
example:
#div-1 { position:relative;}#div-1a { position:absolute; top:0; right:0; width:200px;}
5.two column layout|두 열 구 조 는 position:relative+position:absolute 의 이론 을 실천 하여 두 열 구 조 를 실현 합 니 다.
example:
#div-1 { position:relative;/*부모 요소 상대 위치 추적*/}\#div-1a{ position:absolute;/*하위 요소 절대 포 지 셔 닝*/ top:0; right:0; width:200px;}#div-1b { position:absolute;/*하위 요소 절대 포 지 셔 닝*/ top:0; left:0; width:200px;}
이 예 에서 부모 요소 의 높이 는 하위 요소 의 알려 짐 에 따라 달라 지지 않 기 때문에 부모 요소 의 배경 과 테두리 가 충분 한 높이 를 정의 해 야 표시 할 수 있 습 니 다.
6.float|부동 정렬 사용 float 포 지 셔 닝 요 소 는 float:left;&float:right;두 가지 값.이런 포 지 셔 닝 은 수평 좌표 에서 만 포 지 셔 닝 할 수 있 고 수직 좌표 에서 포 지 셔 닝 할 수 없다.그리고 아래 의 요 소 를 왼쪽 이나 오른쪽 에 움 직 이게 합 니 다.
example:#div-1a { float:left; width:200px;}
7.make two clumn with float|유동 적 으로 두 열 구 조 를 실현 합 니 다.만약 에 하나의 요소 가 float:left;또 다른 float:right;그들의 폭 을 잘 조절 하면 두 열의 배치 효 과 를 실현 할 수 있다.
example:#div-1a { float:left; width:150px;}#div-1b { float:left; width:150px;}
8.clear float|부동 을 제거 합 니 다.float 요 소 를 사용 한 아래 요 소 를 부동 시 키 지 않 으 려 면 clear 를 사용 하 십시오.clear 는 세 개의 값 이 있 습 니 다.clear:left;(왼쪽 이동 지우 기),clear:right;(오른쪽 이동 지우 기),clear:both;(모든 변동 제거).
example:
#div-1a { float:left; width:190px;}#div-1b { float:left; width:190px;}#div-1c { clear:both;}
이로써 이 css 의 포 지 셔 닝 부분 은 끝 났 습 니 다.당신 은 직접 체험 하여 깊 은 인상 을 느 낄 수 있 습 니 다.