{Position}
1️⃣relative
: 상대 배치
: 이동 기준은
본래의 자기 위치로부터
설정 위치로 이동
: top/left/bottom/right
에 값을 넣어 이동
: z-index로 z 축 지정 (아래 설명)
예)
{position:relative; left:100px; top:100px;}
2️⃣absolute
: 절대 위치
: 이동 기준은
중심 좌표인
브라우저 좌표
: top/left/bottom/right
에 값을 넣어 위치 결정
ex.1)
div { position: absolute; left:100px; top:100px;}
지정 시 브라우저 왼쪽 상단 모서리가 중심
ex.2)
div{ position: absolute; right:100px; bottom:100px;}
설정 시 브라우저 우측 하단 모서리 중심
: z-index로 z 축 지정
: relative 값이 부모일 경우
중심 좌표 바뀜
: 부모 요소에 relative 값이
없을 경우 <body> 요소가
중심 좌표
: 위치는
기본 레이아웃에서
공중으로 뜨는 위치, 즉,
모든 윈도우 앞에 위치
*브라우저에
스크롤이 생길 시
페이지를 내릴수록
박스는 안 보이게 된다.
스크롤 이동 시 영역 변경
3️⃣Fixed
엡솔루트와 비슷,
결정적 차이로는
스크롤이 생겨서
페이지를 아래로 내려도
화면상 보이는
박스의 위치에는
변화가 없다.
스크롤 이동 시 영역 고정
* relative와 absoulte의
관계
<style>
body { background-color: pink;}
.a { position:relative; left:50px; top:90px; width:500px; height:500px; border:5px solid red;}
.b { position:absolute; left:70px; top:70px; width:100px; height:100px; border:5px solid blue;}
.c { position:relative; left:20px; top:30px; width:300px; height:300px; border:5px solid purple;}
</style>
</head>
<body>
<div class="a">a
<div class="c">c
<div class="b">b</div>
</div>
</div>
* absolute의 부모 태그가
relative일 경우, 중심 좌표가
브라우저에서 부모 태그로 바뀜.
4️⃣z-index
포지션 속성의 기본 형태인
static을 제외하고 다른 모든
relatvie/absolute/fixed에서
사용 가능.
샘플 코드)
div { width:300px; height: 300px;}
.a { position:absolute; left:270px; top:270px; z-index:2; background:red;}
.b { position:absolute; left:70px; top:70px; z-index:1; background:purple;}
.c { position:absolute; left:150px; top:150px; background:gray;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
그림과 같이 박스의 z 축
위치를 설정할 수 있고
코드 작성 시
숫자 1부터 입력 가능,
픽셀(px)은 적지 않는다.
*박스 가운데 정렬 시키기*
먼저 기본 코드)
div { position:absolute; left:50%; top:50%; width:100px; height:100px; border: 10px solid red;}
위와 같이
포지션 값을
각각 50% 주면
화면 가운데 박스가
정렬할 것 같지만
그렇지 않다.
absolute의 특성상
박스의 왼쪽 면과
위쪽 면이 만나는 지점이
정중앙에 위치하게 되는 것.
그러면 어떻게 할까?
과정을 단계별로 알아보자
1️⃣박스 사이즈 알아내기
위 코드에서 박스 크기는
width/height가 각각 100px,
추가로 border 라인 굵기가 10px
로 가로 세로 각 120px이다.
2️⃣길이 나누기 2
이 각 길이의 절반인 60px만큼
왼쪽, 위로 움직여 준다면
박스는 가운데 정렬하게 된다.
그럼 어떤 속성을 사용해
박스를 움직이게 할 것인가?
3️⃣margin
바깥 여백인 마진의 특성을
활용하여 필요한 수치만큼 빼준다.
div { position:absolute; left:50%; top:50%; margin:-60px 0 0 -60px; width:100px; height:100px; border: 10px solid red;}
margin 값
상 -60px
우 0
하 0
좌 160px
공식을 정리하자면
이동하고자 하는 요소의
가로 세로 사이즈를 체크하고
각 사이즈 반의 크기만큼
margin을 활용해
마이너스(-) 값을 준다.
*실무에서margin 과
relative 활용법 *
먼저 기본 코드)
div { width:100px; height:100px; border: 3px solid red;}
</style>
</head>
<body>
text text text text text text
<br><br><br>
<div> </div>
<br><br><br>
text text text text text text
</body>
</html>
대표사진 삭제
사진 설명을 입력하세요.
박스와 아래위 텍스트 간격 균일.
1️⃣여기서margin 값을
top:-30px;로 주면,
div { margin-top: -30px; width:100px; height:100px; border: 3px solid red;}
박스의 바깥 여백을 줄인 거라
박스 아래쪽에 위치한 텍스트도
박스와 함께 움직인다!
2️⃣이번엔 같은 수치를
relative로 줄 경우.
div { position:relative; top:-30px; width:100px; height:100px; border: 3px solid red;}
박스의 포지션 값 만
변경한 거라
박스 아래 텍스트와는
무관하게 혼자 움직인다.
둘 다 활용도가 높으니
잘 알아두자!
'프로그래밍 > CSS' 카테고리의 다른 글
| 기초) text style / background 속성 정리 (0) | 2020.04.23 |
|---|---|
| 기초) float/clear 속성 정리 및 활용 (0) | 2020.04.22 |
| 기초) box model 개념 및 사이즈 측정법 (0) | 2020.04.21 |
| 기초) 여백(padding/margin)과 선(border) 정리 (0) | 2020.04.21 |
| 기초) css의 style / 선택자 우선순위 정리 (0) | 2020.04.21 |