position 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

position 속성 본문

Front-End (웹)/CSS

position 속성

친절한개발초보자 2021. 8. 25. 01:55

728x90

웹 요소의 위치를 정하는 left, right, top, bottom 속성

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다.
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다.
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다.
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다.

배치 방법을 지정하는 position 속성

postition 속성은 웹 문서 안의 요소를 자유자재로 배치해 준다.
position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.

종류	설명
static	문서의 흐름에 맞춰 배치한다. (기본값)
relative	위칫값을 지정할 수 있다는 점을 제외하면 static과 같다.
absolute	relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
fixed	브라우저 창을 기준으로 위치를 지정해 배치한다.

position:fixed
- 특징
ⅰ) margin속성이 무시된다.
(margin:0 auto만 적용 x)
ⅱ) 사용하면 웹사이트에 고정되어서 스크롤을 위아래로 올리고 내려도 항상 그 위치에 계속 존재한다.
▷웹사이트 상에 존재하는 마우스 스크롤을 내리든 올리든 계속 고장되어서 화면에 존재하는 것들에 사용하는 css속성으로 대표적으로는 쇼핑몰의 카카오톡 상담하기
▷누르면 사이트 맨 위로 올라가지는 버튼
▷상단 검색창 or 메뉴 등

★ 웹사이트의 편의 기능 제작 시 가장 많이 사용한다.
★ 주의사항 : 너무 많이 사용하지 말 것!
(화면에 고정되어 계속 그 위치에 자리를 잡는다는 건 그만큼 그 부분을 볼 수가 없다는 것을 뜻하기 때문에 사용자 입장에서 불편할 수 있다.

ⅲ) margin이 적용은 되지만 position 속성은 위치를 이동시킬 때 사용하는 전용 css속성이 있다.
▷ left, right, bottom, top 총 4가지
▷ 상대 좌표 이동 : 태그가 현재 위치해있는 장소에서부터 이동을 하는 것
▷ 절대좌표 이동 : 태그가 현재 위치해있는 장소는 중요하지 않고 웹사이트 전체를 중심으로 이동하는 것
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>position #1</title>
    <style>
        *{margin:0;padding:0;}
        
        #a{width:500px;height:500px;
            background-color:#123456;
            margin:0 auto;}
        
        #a div{width:100px;height:100px;
                margin:0 auto;}
        
        #a div:nth-child(1){background-color:aqua;position:fixed;right:100px;bottom:100px;}
        #a div:nth-child(2){background-color:pink;}
        #a div:nth-child(3){background-color:orange;}
        
        #scroll{height:3000px;}
    </style>
</head>
<body>
    <div id="a">
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    <div id="scroll"></div>
</body>
</html>
```

position:relative
- left, right, top, bottom을 사용하는 건 fixed와 동일하지만 fixed와 다르게 웹사이트 전체를 기준으로 움직이는 게 아닌 자신의 현재 위치에서부터 이동시키는 게 가능하며 margin속성을 그대로 유지하면서 이동한다.
- relative를 사용해서 태그가 위치를 이동했어도 빈자리를 다른 태그가 채우지 않고 그대로 빈 상태로 유지시켜준다.
- 만약 left, right, top, bottom을 사용했을 때 이동하는 경로에 다른 태그가 존재한다면 그 태그와 겹쳐지는 게 가능하며 그 태그를 가려버린다.
(모든 postion이 전부 가지고 있는 특징)

cf) margin-top css속성은 하나의 태그 안에 들어가 있는 태그들 중에서 첫 번째 태그한테 margin-top을 사용하면 대상 태그 대신에 대상 태그를 감싸고 있는 부모 태그가 움직인다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>position #2</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:500px;height:500px;
                background-color:red;
                margin:0 auto;}
        
        #a div{width:100px;height:100px;margin:0 auto;}
        
        #a div:nth-child(1){background-color:green;position:relative;left:100px;top:100px;}
        #a div:nth-child(2){background-color:blue;position:relative;top:100px;}
        #a div:nth-child(3){background-color:orange;margin-top:100px;}
        
        /*css속성은 동일한 속성일 경우 밑에 작성한게 위에 작성한 것을 덮어씌워주는 구조입니다
        
        margin:0 auto = 세로값
        margin-top/bottom 속성은 세로값속성
        auto = 가로속성 / left-right와 사용하면 auto를 덮어씌워버린다.*/
    </style>
</head>
<body>
    <div id="a">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

position:absolute
- position:fixed와 대부분의 특징이 비슷하다.
(고장 기능이 없는 fixed)
- 요소에 position: absolute라고 한 후 위칫값을 지정하면 요소 중에서 position: relative를 사용한 요소를 기준으로 위치를 결정한다.
- 만약 부모 요소 중에 없으면 상위 요소를 찾아보고, 그래도 없다면 더 위의 요소를 찾아본다.
- 결론) 어떤 요소에 position: absolute를 사용하려면 부모 요소에는 position: relative라고 지정해야 원하는 대로 배치될 수 있다.

★ 겹칠 수 없는 대상을 겹쳐서 디자인으로써 사용할 때

요소의 display가 변경된다.
- position 속성 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position #3</title>
    <style>
        #a{width:500px;height:500px;
            background-color:#123456;
            margin:0 auto;}
        
        #a div{width:100px;height:100px;margin:0 auto;}
        
        #a div:nth-child(1){background-color:#987654;position:absolute;}
        #a div:nth-child(2){background-color:orange;}
        #a div:nth-child(3){background-color:pink;}
        
        #scroll{height:3000px;}
        
    </style>
</head>
<body>
    <div id="a">
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    <div id="scroll"></div>
</body>
</html>

728x90