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

컴프

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

· 8년 전 · 조회 2894 2894 · 댓글 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
137	HTML	테이블안에 있는 글 자동 정렬하기 [1]	작은새 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3777
136	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 61-65	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4131
135	HTML	Fedora Core FTP로 설치 [3]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4233
134	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 21-30	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4647
133	HTML	전체화면으로 페이지 열기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3272
132	HTML	이번에는 텍스트영역에서 메세지별로 타이핑 시킵니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3132
131	HTML	텍스트 상자에서 메세지가 타이핑 됩니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2807
130	HTML	오늘 날짜와 요일 넣기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3684
129	HTML	창의 사이즈 변경 금지 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2746
128	HTML	손님의 방문 횟수를 알려 줍니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3338
127	HTML	자바스크립트 버튼에 링크 걸기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	8591
126	HTML	이름을 물어보고 인사하는 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2540
125	HTML	폼 버튼을 클릭하면 경고 메세지 보내기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3006
124	HTML	포토샵 작업 중에 잘되던 한글 입력이 갑자기 안될때 있으시죠? [5]	두루굳센™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5354
123	HTML	버튼에 스타일주기(익스)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2927
122	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2836
121	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3434
120	HTML	영카트에서 카테고리 검색하기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3198
119	HTML	자바스크립트로 url 획득	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3184
118	HTML	포샾 팁강좌입니다...퍼온 것입니다. [3]	버섯도리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5069
117	HTML	투명도조절 [2]	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3647
116	HTML	textarea에 입력된 길이만큼 게이지로 표현	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3506
115	HTML	버튼 하나로 링크두개를 열어보자	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3897
114	HTML	[펌]다중 업로드	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3857
113	HTML	포토샵에서 제가 간단하게 쓰는 점선 쓰는 방법입니다 [5]	yunni 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5281
112	HTML	register_globals = on /off 차이점	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3611
111	HTML	밑의 갤러리 압축 화일 [4]	진아맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4091
110	HTML	getElementById와 getElementsByName	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3520
109	HTML	[소개] smtp를 이용하여 mail 보내기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4863
108	HTML	cart클래스2	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2976