HTML Position and Coordinate Layout

1. position: relative

• 뜻: 내 원리 위치를 기준으로 이동하세요

.layout2-button1 {
    padding: 15px;
    font-size: 20px;
    background-color: white;
    border: none;
    border-radius: 5px;
    position: relative;
    // 내 원래 위치 아래에서 100px 위로
    bottom: 100px;
    // 내 원래 위치 왼쪽에서 100px 오른쪽으로
    left: 100px;
}

• position 부여하면 1. 좌표이동 가능, 2. 공중에 뜸

2. position: static

• 좌표이동 X

3. position: fixed

• 현재 화면을 기준으로 고정
• 고정시킬 요소가 필요하면 사용 (예를들어, 상단 네비게이션)

4. position: absolute

• 내 부모 태그중에 position: relative를 가진 부모 기준으로 좌표 움직임
• ex)

// 부모 태그 (position: relative 적용)
<div class="layout2-container" style="padding: 1px;">
  <h1 class="layout2-header">Buy shoes!</h1>
  <p class="layout2-content">
    Hello, please buy this shoes
  </p>
  // position: absolute 적용
  <button class="layout2-button1">Buy</button>
</div>

// 부모
.layout2-container {
    width: 100%;
    height: 80vh;
    background-image: url(../images/shoes.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    position: relative;
}

// 버튼 
.layout2-button1 {
    padding: 15px;
    font-size: 20px;
    background-color: white;
    border: none;
    border-radius: 5px;
    position: absolute;
    bottom: 0px;
    right: 20px;
}

• 부모태그 안에서만 움직임.

5. position: absolute를 적용한 요소 가운데 정렬

.button {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 적절히