[position] CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※ 상속X

목차

1. right 정의 - 오른쪽 기준 위치 지정
2. right 구문
3. right 예제 - position:static 경우
4. right 예제 - position:absolute 경우
5. right 예제 - position:fixed 경우
6. right 예제 - position:relative 경우

right 정의 - 오른쪽 기준 위치 지정

 

요소 위치를 우측 기준선에서 얼마나 좌측으로 위치시킬건지 지정.

• 양수 : 기준선 좌측
• 음수 : 기준선 우측

 

---

 

1. 

right 속성은 position 속성과 함께 사용하며, 

position 속성의 속성값이 static 일 땐 top 속성이 무시됨.

 

2. 

right 속성의 속성값이 동일해도, 

해당 요소 및 부모 요소의 positon 속성의 속성값이 뭐냐에 따라 위치가 달라짐.

 

right 구문

 

선택자 {right:속성값;}

 

---

[속성값]

 

auto

상단 기분점에서 얼마나 밑으로 내려 위치시킬 건지 브라우저가 자동 결정  (기본값)

 

length (px, cm 단위 등) 

상단 기준점에서 몇 px, cm만큼 밑으로 내려 위치시킬 건지 지정. 

음수값 경우 기준점보다 더 우측 위치

 

% 단위

상단 기준점에서 해당 요소의 % 만큼 밑으로 내려 위치시킬 건지 지정. 

음수값 경우 기준점보다 더 우측 위치

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모 요소의 속성값 상속.

 

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>

 

결과보기