728x90
반응형
position |
|
1. static (정적)
- 기본적인 배치임.
- 기본값(디폴트)으로 별도로 지정하지 않아도 되는 속성임. |
|
2. sticky (붙어있는)
- 상대적 위치의 x축, y축 좌표를 기준으로 설정한 위치에 달라 붙어 있는다.
- <div> 이내에 기술되면 해당 div기준으로 sticky됨 |
|
3. relative (상대적)
- 자신이 위치해야하는 좌측상단 좌표를 기준으로 위치를 지정한다.
- 위치 top, right, left, bottom으로 지정 가능하다.
- 이동한 만큼 다른 영역을 침범한다.
|
|
4. fixed (고정)
- 위치 top, right, left, bottom으로 지정가능하며, 단위는 px, %등으로 지정가능하다.
- 지정한 위치 위에 떠 있는 것처럼 고정된다. (부모속성마저 무시하여 body기준으로 움직임) |
|
5. relative와 ablsolute 같이 사용하는 경우
- 현재 영역은 relative영역입니다.
<div class="ablsoute2">
6. 현재 영역은 absolute영역입니다.
absolute2 div엘리먼트를 감싸고 있는 relative2 div엘리먼트의 x축, y축을
기준으로 하여 위치한다.
absolute를 position : relative로 지정하지 않으면 body기준으로 위치한다. |
|
7. absolute (절대적)</h2>
- 위치 top, right, left, bottom으로 지정가능하며, 단위는 px, %등으로 지정가능하다.
- 지정한 위치 위에 떠 있는 것처럼 고정된다. 별도의 상대적 영역지정이 없으면 브라우저(body영역)의 x축, y축을 기준으로 하여 위치한다. |
|
> z-index를 통해 레이어드된 층수 설정하여 가려짐 설정가능 |
ㅁㅁ
/* z-index속성은 층 수를 정하는 속성이다. */ body{ margin:0; padding: 0; background-color: black; } h2 {margin:0;} span {color: white;} div.static { position: static; background-color: #73AD21; margin:0; padding: 0; } /* div.relative { position : relative; left: 30px; top: 20px; background-color: lightpink; } */ div.relative { position : relative; left: 30px; top: 20px; background-color: lightpink; z-index: 999; /* z-index를 통해 레이어드된 층수 설정하여 가려짐 설정가능 */ } div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; z-index: 998; background-color: skyblue; } div.absolute1{ position: absolute; top: 5px; right: 0; width: 300px; background-color: red; /* 둥둥떠있는.. width, height미지정시 컨텐츠 크기만큼 */ } div.relative2 { position : relative; width : 500px; height: 200px; background-color: greenyellow; } div.absolute2{ position: absolute; top: 5px; right: 0; width: 200px; background-color: white; } /* div.sticky { position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 1px solid #000000; } */ div.sticky { position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 1px solid #000000; z-index: 9999; }
<!DOCTYPE html> <html> <head> <title>css positiopn</title> <link rel="stylesheet" href="../css/c_position.css"> </head> <body> <div class="static"> <h2>1. static (정적)</h2> 기본적인 배치임. 기본값(디폴트)으로 별도로 지정하지 않아도 되는 속성임. <br /> </div> <div> <div class="sticky"> <!-- <div class="sticky" style="width: 300px; z-index: 999;"> --> <h2>2. sticky (붙어있는) div이내 위치</h2> 상대적 위치의 x축, y축 좌표를 기준으로 설정한 위치에 달라 붙어 있는다. </div> </div> <div class="relative"> <h2>3. relative (상대적)</h2> 자신이 위치해야하는 좌측상단 좌표를 기준으로 위치를 지정한다. <br /> 위치 top, right, left, bottom으로 지정 가능하다.<br /> 이동한 만큼 다른 영역을 침범한다. </div> <div class="fixed"> <h2>4. fixed (고정)</h2> 위치 top, right, left, bottom으로 지정가능하며, 단위는 px, %등으로 지정 가능하다. 지정한 위치 위에 떠 있는 것처럼 고정된다. </div> <div class="relative2"> <h2>5. relative와 ablsolute 같이 사용하는 경우</h2> 현재 영역은 relative영역입니다. <div class="absolute2"> <h2>6. 현재 영역은 absolute영역입니다.</h2> absolute2 div엘리먼트를 감싸고 있는 relative2 div엘리먼트의 x축, y축을 기준으로 하여 위치한다. </div> </div> <div class="absolute1"> <h2>7. absolute (절대적)</h2> 위치 top, right, left, bottom으로 지정가능하며, 단위는 px, %등으로 지정 가능하다. 지정한 위치 위에 떠 있는 것처럼 고정된다. 별도의 상대적 영역 지정이 없으면 브라우저(body영역)의 x축, y축을 기준으로 하여 위치한다. </div> <div class="sticky"> <h2>2. sticky (붙어있는)</h2> body의 x축, y축 좌표를 기준으로 설정한 위치에 달라 붙어 있는다. </div> <span> 제2조(민간임대주택의 입주일) 위 주택의 입주일은 년 월 일부터 년 월 일까지로 한다. 제3조(월임대료의 계산) ① 임대기간이 월의 첫날부터 시작되지 않거나 월의 말일에 끝나지 않는 경우에는 그 임대기간이 시작되거나 끝나는 월의 임대료는 일할로 산정한다. ② 입주 월의 월임대료는 입주일(제2조에 따른 입주일을 정한 경우 입주일)부터 계산한다. 다만, 입주지정기간이 지나 입주하는 경우에는 입주지정기간이 끝난 날부터 계산한다.<br /><br /> 제4조(관리비와 사용료) ① 임차인이 임대주택에 대한 관리비와 사용료를 임대사업자 또는 임대사업자가 지정한 관리주체에게 납부해야 하는 경우에는 특약으로 정하는 기한까지 내야하며, 이를 내지 않을 경우에는 임대사업자는 임차인으로 하여금 연체된 금액에 대해 제1조제4항에 따른 연체요율을 적용하여 계산한 연체료를 더하여 내게 할 수 있다. ② 임대사업자는 관리비와 사용료를 부과ㆍ징수할 때에는 관리비와 사용료의 부과 명세서를 첨부하여 임차인에게 이를 낼 것을 통지해야 한다. 이 경우 임대사업자는 일반관리비, 청소비, 경비비, 소독비, 승강기 유지비, 난방비, 급탕비, 수선유지비, 지능형 홈네트워크 설비 유지비 외의 어떠한 명목으로도 관리비를 부과ㆍ징수할 수 없다. <br /><br /> </span> </body> </html>
728x90
반응형
'[CSS]' 카테고리의 다른 글
[CSS] media (0) | 2024.02.22 |
---|---|
[CSS] web Font (0) | 2024.02.22 |
[CSS] ex) 회원가입 (0) | 2024.02.22 |
[CSS] Float, overflow (0) | 2024.02.22 |
[CSS] Float (0) | 2024.02.21 |