[ Position 속성 ]

 

# absolute : 절대적인

 

# fixed : 고정된

 

# relative : 상대적인

 

# static : 정지된

 

 

[ position_absolute 속성값 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>01_position속성_absolute</title>
    <style>
        *{margin: 0;
        padding: 0;}
        div, section{
            border: 1px solid red;
        }
        #parent>div,section{
            width: 100px;
            height: 100px;
            opacity: .5;
        }
        #parent div:nth-of-type(1){
            background-color: green;
            position: absolute;
            right: 50px;
            top: 100px;
        }
        #parent div:nth-of-type(2){
            background-color: orange;
            position: absolute;
            right: 50px;
            top: 100px;
        }
        #parent div:nth-of-type(3){
            background-color: pink;
            position: absolute;
            bottom: 100px;
            right: 200px;
        }
        #parent div:nth-of-type(4){
            background-color: blue;
            width: 200px;
            position: absolute;
            top: 150px;
            right:100px;
        }
        section{
            background-color: lightblue;
        }
        #parent{
            position: absolute;
            width: 700px;
            height: 500px;
            bottom: 300px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
        <section>box4</section>
        <div>box5</div>
    </div>
    <h1>
        position: aboslute;속성은 부모에 position설정값이 없을 때에는 브라우저의 를 기준으로 자리를 잡는다.
        그런데 부모요소에 position속성값이 생기면(static을 제외) 부모를 기준으로 자리를 다시 재정렬한다!!
    </h1>
</body>
</html>

# 절대위치(absolute position)은 고정위치가 view port를 기준으로 위치를 결정하는 것과 비슷하게 동작한다.

단지 뷰포트를 기준으로 하는 것이 아닌, 위치가 설정된 조상요소를 기준으로 위치를 설정한다. (단, 부모 중에 static 요소 제외)

 

# 위치가 설정된 조상 요소를 가지지 않는다면, html문서의 body 요소를 기준으로 위치를 설정한다.

 

# 현재 위치가 변하는 것은 아니다.

 

# relative와 absolute의 공통점: offset속성을 가질 수 있다는 것. but!!

absolute는 offset속성의 기준이 되는 위치가 조건에 따라서 달라질 수 있다. 

이 속성의 이름이 absolute라서 혼동될 수 있다는 점 주의~!

 

*offset 속성

: 기준이 되는 곳으로부터 top, right, bottom, left... 얼마만큼 떨어졌는가.

ex. bottom: 10px;

-> 기준이 되는 bottom 으로부터 위로 10px 만큼 떨어진 곳.

 

 

[ position_fixed 속성값 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>02_position_fixed속성값</title>
    <style>
        *{margin: 0;
        padding: 0;}
        div, section{
            border: 1px solid red;
        }
        #parent>div,section{
            width: 100px;
            height: 100px;
            opacity: .5;
        }
        #parent div:nth-of-type(1){
            background-color: green;
            position: absolute;
            right: 50px;
            top: 100px;
        }
        #parent div:nth-of-type(2){
            background-color: orange;
            position: absolute;
            right: 50px;
            top: 100px;
        }
        #parent div:nth-of-type(3){
            background-color: pink;
            position: absolute;
            bottom: 100px;
            right: 200px;
        }
        #parent div:nth-of-type(4){
            background-color: blue;
            width: 200px;
            position: absolute;
            top: 150px;
            right:100px;
        }
        section{
            background-color: lightblue;
        }
        #parent{
            position: absolute;
            width: 700px;
            height: 500px;
            bottom: 300px;
            left: 100px;
        }
        #fixed{
            width: 100px;
            height: 100px;
            background-color: seagreen;
            position: fixed;
            bottom: 100px;
            right: 300px;
        }
        h1{
            position: absolute;
            top: 3000px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
        <section>box4</section>
        <div>box5</div>
    </div>
    <div id="fixed">fixed</div>
    <h1>
        position: fixed;속성은 스크롤을 이동해도 그 위치에 그대로 고정되어 있다!!
        부모가 position속성을 가지고 있어도 마찬가지로 혼자만 고정되어 있다!! 그리고 부모에 상관없이
        브라우저를 기준으로 위치를 잡는다!!
    </h1>
</body>
</html>

 

# position: fixed 속성은 스크롤을 이동해도 그 위치에 그대로 고정되어 있다.

 

# 부모가 position 속성을 가지고 있어도 마찬가지로 혼자만 고정되어 있다.

 

# 부모에 상관없이 브라우저를 기준으로 위치를 잡는다.

 

[ position_static 속성값 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>03_position_static속성값</title>
    <style>
        *{margin: 0;
        padding: 0;}
        div, section{
            border: 1px solid red;
        }
        #parent>div{
            width: 100px;
            height: 100px;
        }
        #parent{
            widht: 500px;
            height: 500px;
            position: absolute;
            right: 0;
        }
        #parent div:nth-of-type(1){
            background-color: yellow;
            position: static;
            top: 500px;
            left: 300px;
        }
        #parent div:nth-of-type(2){
            background-color: green;
            position: static;
            bottom: 800px;
            left: 300px;
        }
        #parent div:nth-of-type(3){
            background-color: red;
            position: static;
            top: 500px;
            left: 300px;
        }
    </style>
</head>
<body>
    <h1>
        static속성은 position의 default속성값으로 위치를 html구조의 순서대로 잡는다.
        사용자가 css를 활용해서 원하는 위치로 이동이 불가능하다!!
    </h1>
    <div id="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>
</html>

 

# static 속성은 position의 default 속성값이다. 즉, position 속성을 부여하지 않았을 때 가지는 디폴트값.

 

# html 요소의 위치를 결정하는 가장 기본적인 방식이다(:

 

# position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다.

 

# 위치를 html 구조의 순서대로 잡는다. 사용자가 css를 활용해서 원하는 위치로 이동이 불가능하다. 

-> static, position은 단순히 웹페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.

 

 

 

[ position_relative 속성값 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>04_position_relative속성값</title>
    <style>
        *{margin: 0;
        padding: 0;}
        div, section{
            border: 1px solid red;
        }
        #parent>div{
            widht: 100px;
            height: 100px;
        }
        #parent{
            width: 500px;
            height: 500px;
            position: absolute;
            top: 100px;
            right: 0;
        }
        #parent div:nth-of-type(1){
            background-color: yellow;
            position: relative;
            top: 300px;
            left: 100px;
        }
        #parent div:nth-of-type(2){
            background-color: green;
            position: relative;
            top: 300px;
            right: -100px;
        }
        #parent div:nth-of-type(3){
            background-color: red;
            position: relative;
            top: -200px;
        }
    </style>
</head>
<body>
    <h1>
        relative속성값은 본인이 원래 있던 위치를 기준으로 왼쪽에서 오른쪽으로 원하는 값만큼 이동한다.
        부모가 position속성을 가지고 있을 때 부모를 따라서 움직이기는 하지만 마찬가지로 본인기준으로
        원하는 수치만큼 이동한다!!
    </h1>
    <mark>position:relative 속성값을 가지고 이동한다면 나머지 박스의 속성값이 static이라면 비어있는
    자리로 이동하지 않는다!! 만약에 비어있는 자리로 이동하고 싶다면 나머지 박스도 position:absolute나
    relative를 이용해서 비어있는 자리로 이동이 가능하다!!</mark>
    <div id="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>
</html>

# relative 속성값은 본인이 원래 있던 위치를 기준으로 왼쪽에서 오른쪽으로 원하는 값만큼 이동한다.

 

# 부모가 position 속성을 가지고 있을 때 부모를 따라서 움직이기는 하지만, 마찬가지로 본인기준으로 원하는 수치만큼 이동한다~

 

# position: relative 속성값을 가지고 이동하고, 나머지 박스의 속성 값이 static이라면 비어있는 자리로 이동하진 않는다. 

만약에 비어있는 자리로 이동하고 싶다면, 나머지 박스도 position: absolute나 relative를 이용해서 비어있는 자리로 이동이 가능하다(:

 

 

[ z-index ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>05_z-index</title>
    <style>
        *{margin: 0;
        padding: 0;}
        div, section{
            border: 1px solid red;
        }
        #parent>div,section{
            widht: 100px;
            height: 100px;
        }
        #parent div:nth-of-type(1){
            background-color: green;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
        #parent div:nth-of-type(2){
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 100px;
            z-inex: 9999999999;
            widht: 500px;
            height: 300px;
        }
        #parent div:nth-of-type(3){
            background-color: pink;
            position: absolute;
            top: 150px;
            left: 150px;
            z-index: 3;
        }
        #parent div:nth-of-type(4){
            background-color: blue;
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 99999;
        }
        section{
            background-color: lightblue;
        #parent{
            width: 700px;
            height: 500px;
            position: absolute;
            bottom: 300px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
    <h1>
        요소들의 z-index란 위아래 순서 arrange를 의미한다!! 정수를 쓰고 숫자가 높을수록 위에 위치한다!!
        -->GNB네비게이션 같은 경우는 무조건 위에서 보이기 위해 z-index:999999 이런식으로 설정한다!!
    </h1>
</body>
</html>

 

# 요소들의 z-index란 위아래 순서 arrange를 의미한다.

 

# 정수를 쓰고 숫자가 높을수록 위에 위치한다~~ ->양수나 음수 모두 설정가능하다.

반응형

'IT' 카테고리의 다른 글

gnb 연습 / navigation bar  (0) 2022.07.05
Sprite 속성 / Sprite animation 연습  (0) 2022.07.02
상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child  (0) 2022.06.29
레이아웃 연습하기 / Z 레이아웃  (0) 2022.06.28
float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습  (0) 2022.06.27

티스토리툴바