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

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2880 2880 · 댓글 1 1

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>

This div element has position: relative;

</div>

</body>

</html>

댓글 작성

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

로그인하기

댓글 1개

비밀이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

8년 전

좋은정보입니다

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
857	HTML	The placeholder Attribute(자리 표시 자 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1385
856	HTML	The pattern Attribute(패턴 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1843
855	HTML	The multiple Attribute(다중 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2079
854	HTML	속성 값(The value Attribute)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1493
853	HTML	입력 유형 URL(Input Type Url)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2189
852	HTML	입력 유형 전화(Input Type Tel) 전화번호 형식만들기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3270
851	HTML	입력 유형 날짜 / 시간 - 로컬(Input Type Datetime-local)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3243
850	HTML	입력 유형 URL(Input Type Url)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2084
849	HTML	Input Type Tel	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1664
848	HTML	input date input color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1819
847	HTML	입력 제한(Input Restrictions) 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1710
846	HTML	HTML5 input 유형	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1910
845	HTML	Input Type Radio Input Type Checkbox Input Type Button	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2033
844	HTML	Input Type Submit , Input Type Reset	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1973
843	HTML	Input Type Text , Input Type Password	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2190
842	HTML	HTML5 form 요소 datalist keygen output	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2037
841	HTML	html textarea button 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1961
840	HTML	html input select 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2324
839	HTML	HTML NAME 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1906
838	HTML	HTML METHOD POST GET	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2175
837	HTML	html form action	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2010
836	HTML	<fieldset>을 사용하여 양식 데이터 그룹화	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2029
835	HTML	html form submit	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2190
834	HTML	html form input 객체	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1533
833	HTML	HTML 레이아웃 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1891
832	HTML	HTML <script> 요소 HTML <base> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1379
831	HTML	뷰포트 설정하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2435
830	HTML	[HTML <head> 요소] 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1649
829	HTML	HTML The class Attribute	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1253
828	HTML	[HTML 블록 및 인라인 요소]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2472