테스트 사이트 - 개발 중인 베타 버전입니다

CSS 레이아웃 - position: relative; 속성

· 8년 전 · 2878 · 1

CSS 레이아웃 - position: relative; 속성

 

position: relative;

 

의 요소 position: relative;는 그 통상의 위치에 상대적으로 배치됩니다.

 

상대적으로 배치 된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 해당 요소가 정상 위치에서 벗어나 조정됩니다. 다른 콘텐츠는 요소가 남긴 모든 틈에 맞춰 조정되지 않습니다.

 

이 <div> 요소의 위치는 relative입니다.

다음은 사용 된 CSS입니다.

 

div.relative {

    position: relative;

    left: 30px;

    border: 3px solid #73AD21;

}

 

 

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

    position: relative;

    left: 30px;

    border: 3px solid #73AD21;

}

</style>

</head>

<body>

 

<h2>position: relative;</h2>

 

<p>An element with position: relative; is positioned relative to its normal position:</p>

 

<div class="relative">

This div element has position: relative;

</div>

 

</body>

</html>

 


 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

좋은정보입니다

게시글 목록

번호 제목
3199
3198
3197
3196
3195
3194
3192
3191
3190
3189
3188
3187
3186
3185
3184
3183
3182
3181
3180
3179
3178
3177
3176
3175
3174
3173
3172
3171
3170
3169