728x90
★ 요소의 위치, Position
- 1. padding > 부모가 자식의 위치 지정
- 2. margin > 스스로 위치 지정
- 3. position > 정석(CSS1 ~ CSS3)
- 4. transfom > 정석(CSS3)
★ Position
- 좌표값 사용 > 위치 지정
- x(left), y(top)
- 좌표를 지정하는 방식이 여러개 제공
- 1. position : static;
1. position : static;
- 기본값
- 정적 좌표
- 워드 프로세스 방식 > FlowLayout 방식
- 코딩 순서대로 출력되는 방식
- 먼저 코딩 > 위에 배치, 같은줄 : 왼쪽에 배치
- 나중에 코딩 > 아래에 배치, 오른쪽에 배치- 2. position : absolute;
2. position : absolute;
- 절대 좌표
- left, top
- 문서의 좌측 상단을 기준으로 한다.(X)
- 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 기준으로 한다.
- 원래 있던 공간이 사라진다.- 3. position : relative;
3. position : relative;
- 상대 좌표
- left, top
- 자신의 위치를 기준으로 한다.
- 원래 있던 공간이 그대로 유지된다.- 4. position : fixed;
4. position : fixed;
- 고정 좌표
- left, top
- 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
- 스크롤에 반응하지 않고 그대로 유지된다.
- 원래 있는 공간이 사라진다.- 5. position : sticky;
5. position : sticky;
- 고정 좌표
- left, top
- 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
- 화면에 보일때는 static처럼 동작, 사라질때는 fixed 처럼 동작
- 스크롤에 반응하지 않고 그대로 유지된다.
- 원래 있던 공간이 그대로 유지된다.
■ 2. position : absolute 예제
- 소스코드
<style>
.box {
border : 5px solid black;
width : 200px;
height: 200px;
}
#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}
#box2 {
position : absolute;
left : 0px;
top : 0px;
}
</style>
<body>
<h1>position</h1>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>- 실행 결과
■ 3. position : relative 예제
<style>
.box {
border : 5px solid black;
width : 200px;
height: 200px;
}
#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}
#box2 {
position:relative;
left : 100px;
top : 0px;
}
</style>
<body>
<h1>position</h1>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>- 실행 결과
■ 4. position : fixed 예제
<style>
.box {
border : 5px solid black;
width : 200px;
height: 200px;
}
#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}
#box2 {
position : fixed;
left : 0px;
top : 0px;
}
</style>
<body>
<h1>position</h1>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>- 실행 결과
■ 5. position : sticky 예제
<style>
.box {
border : 5px solid black;
width : 200px;
height: 200px;
}
#box1 { background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}
#box2 {
position : sticky;
left : 0px;
top : 0px;
}
</style>
<body>
<h1>position</h1>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>- 실행 결과
■ 부모자식 상자에 대한 예제
<style>
#b1, #b2, #b3 {
border : 5px solid black;
}
#b1 {
width: 500px;
height : 400px;
background-color: tomato;
position : absolute;
left : 500px;
top : 200px;
}
#b2 {
width: 400px;
height : 300px;
background-color: gold;
}
#b3 {
width: 300px;
height : 200px;
background-color: cornflowerblue;
}
</style>
<body>
<h1>absolute</h1>
<div id="b1">
상자1
<div id="b2">
상자2
<div id="b3">
상자3
</div>
</div>
</div>
</body>- 부모가 움직이면 자식이 같이 움직임
- 실행 결과
- 모든 자식 박스에 position을 주었을 경우
<style>
#b1, #b2, #b3 {
border : 5px solid black;
}
#b1 {
width: 500px;
height : 400px;
background-color: tomato;
position : absolute;
left : 500px;
top : 200px;
}
#b2 {
width: 400px;
height : 300px;
background-color: gold;
position : absolute;
left : 0px;
top : 0px;
}
#b3 {
width: 300px;
height : 200px;
background-color: cornflowerblue;
position:absolute;
left : 0px;
top : 0px;
}
</style>
<body>
<h1>absolute</h1>
<div id="b1">
상자1
<div id="b2">
상자2
<div id="b3">
상자3
</div>
</div>
</div>
</body>- 실행 결과
★ Position 추가사항
- left / right > x 좌표
- top / bottom > y 좌표
- 사용법
right : 0px;
bottom : 0px;- 사용 ex)
<style>
#box1 {
border : 1px solid black;
width : 200px;
height: 200px;
background-color: gold;
position : absolute;
right : 0px;
bottom : 0px;
}
</style>
<body>
<div id="box1" class="box">상자1</div>
</body>- 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 15 - Align (0) | 2023.04.17 |
|---|---|
| CSS STEP 14 - 응용 예제 (0) | 2023.04.17 |
| CSS STEP 12 - Reset CSS (0) | 2023.04.17 |
| CSS STEP 11 - Float (0) | 2023.04.17 |
| CSS STEP 10 - Display (0) | 2023.04.17 |
