# Position과 좌표 레이아웃

🎈Tip. body 태그에 기본적으로 maring이 있기 때문에 꽉찬 화면으로 표현하고 싶다면 body에 margin을 0으로 만들자. 

* 좌표 속성

```css
.box {
  top : 20px;
  left : 30%;
}
```

top, left, bottom, right 라는 속성을 사용하면

요소의 상하좌우 위치를 변경할 수 있습니다. 

하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. 

position 속성은 좌표속성을 적용할 **기준점**이 여기에요\~! 라고 지정해주는 역할입니다. 

```css
 position : static; /* 기준이 없음 (좌표적용 불가) */
 position : relative; /* 기준이 내 원래 위치 */
 position : absolute; /* 기준이 내 부모 */
 position : fixed; /* 기준이 브라우저 창 (viewport) */
```

```css
.main-title {
    color: white;
    font-size: 40px;
    margin-top: 150px;
    margin-left: 38%;

}
.main-content{
    color: white;
    font-size: 18px;
    text-align: center;
}

.main-button {
    padding: 15px;
    font-size: 20px;
    background: white;
    border : none;
    border-radius: 5px;
    position: relative;
    top: 50px;
    left: 420px;
}
```

여기서 원하는 기준을 선택하시면 됩니다. 그럼 이제 좌표속성으로 좌표 값을 줄 수 있습니다.

position : absolute는 부모 박스를 기준으로 찰싹 달라붙은 뒤에 좌표값을 적용하게 되는데, 

정확히 말하면 부모가 아니라 부모 중에 position : relative를 가지고 있는 부모가 기준입니다. 

position 부여 하면

1. 좌표이동 가능
2. 공중에 뜸

```css
.main-background{
    position: relative;
}


.main-button {
    position: absolute;
    padding: 15px;
    font-size: 20px;
    background: white;
    border : none;
    border-radius: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 120px;

}
```

✨ 과제.  구매하기 버튼 아래에 배경과 겹쳐지는 텍스트 박스 만들기

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F01enMRdrFR4ZH6sFZkQL%2FScreenshot_95.png?alt=media&#x26;token=41b7e49f-4af0-4864-bfb5-d9f102821250" alt=""><figcaption></figcaption></figure>