목차
- right 정의 - 오른쪽 기준 위치 지정
- right 구문
- right 예제 - position:static 경우
- right 예제 - position:absolute 경우
- right 예제 - position:fixed 경우
- right 예제 - position:relative 경우
right 정의 - 오른쪽 기준 위치 지정
요소 위치를 우측 기준선에서 얼마나 좌측으로 위치시킬건지 지정.
1.
right 속성은 position 속성과 함께 사용하며,
position 속성의 속성값이 static 일 땐 top 속성이 무시됨.
2.
right 속성의 속성값이 동일해도,
해당 요소 및 부모 요소의 positon 속성의 속성값이 뭐냐에 따라 위치가 달라짐.
right 구문
선택자 {right:속성값;}
[속성값]
auto
상단 기분점에서 얼마나 밑으로 내려 위치시킬 건지 브라우저가 자동 결정 (기본값)
length (px, cm 단위 등)
상단 기준점에서 몇 px, cm만큼 밑으로 내려 위치시킬 건지 지정.
음수값 경우 기준점보다 더 우측 위치
% 단위
상단 기준점에서 해당 요소의 % 만큼 밑으로 내려 위치시킬 건지 지정.
음수값 경우 기준점보다 더 우측 위치
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.
※ 아래 예제들의 .parent 클래스 갖는 요소에 각각 아래 속성들을 추가해서도 확인 바람.
position:static;
position:relative;
position:absolute;
position:fixed;
position:sticky;
right 예제 - position:static 경우
문서 흐름인 p요소 열에 맞춰 위치, 이 경우top, right 속성은 무시됨.
<style>
.parent {
width: 720px;
height: 1000px;
margin: auto;
border: 1px solid #b8064d;
background-color: #f8e1eb;
color:#b8064d;
padding-left:10px
}
.child {
width: 200px;
border: 1px solid #b8064d;
background-color: #f8e1eb;
position: static;
top: 100px;
right: 100px;
color:#b8064d;
padding-left:10px
}
</style>
<div class="parent">
<p>홈짱닷컴 (homzzang.com)</p>
<div class="child">
<p>홈페이지 무료 제작 강의</p>
</div>
<p>HTML CSS 무료 강의</p>
</div>
right 예제 - position:absolute 경우
부모 요소인 브라우저 기준, top right 속성에 의해 상단 우측 기준, 스크롤하면 위치 변함
<style>
.parent {
width: 720px;
height: 1000px;
margin: auto;
border: 1px solid #b8064d;
background-color: #f8e1eb;
color:#b8064d;
padding-left:10px
}
.child {
width: 200px;
border: 1px solid #b8064d;
background-color: #f8e1eb;
position: absolute;
top: 100px;
right: 100px;
color:#b8064d;
padding-left:10px
}
</style>
<div class="parent">
<p>홈짱닷컴 (homzzang.com)</p>
<div class="child">
<p>홈페이지 무료 제작 강의</p>
</div>
<p>HTML CSS 무료 강의</p>
</div>
right 예제 - position:fixed 경우
부모 요소 브라우저 기준, top right 속성에 의해 상단 우측 기준, 스크롤 해도 위치 불변.
<style>
.parent {
width: 720px;
height: 1000px;
margin: auto;
border: 1px solid #b8064d;
background-color: #f8e1eb;
color:#b8064d;
padding-left:10px
}
.child {
width: 200px;
border: 1px solid #b8064d;
background-color: #f8e1eb;
position: fixed;
top: 100px;
right: 100px;
color:#b8064d;
padding-left:10px
}
</style>
<div class="parent">
<p>홈짱닷컴 (homzzang.com)</p>
<div class="child">
<p>홈페이지 무료 제작 강의</p>
</div>
<p>HTML CSS 무료 강의</p>
</div>
right 예제 - position:relative 경우
해당 요소가 원래 있던 자리 기준, top right 속성에 의해 우측 구석 기준.
<style>
.parent {
width: 720px;
height: 1000px;
margin: auto;
border: 1px solid #b8064d;
background-color: #f8e1eb;
color:#b8064d;
padding-left:10px
}
.child {
width: 200px;
border: 1px solid #b8064d;
background-color: #f8e1eb;
position: relative;
top: 100px;
right: 100px;
color:#b8064d;
padding-left:10px
}
</style>
<div class="parent">
<p>홈짱닷컴 (homzzang.com)</p>
<div class="child">
<p>홈페이지 무료 제작 강의</p>
</div>
<p>HTML CSS 무료 강의</p>
</div>
