<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

.box1 {
    width: 50px;
    height: 50px;
    background-color: red;
}

.box2 {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color:blue;
}



여기서 box2에만 fixed를 적용시켰는데, fixed가 적용되면 문서의 흐름에서 제거되고 뷰포트 (0,0)에 배치된다고하던데


했는데 여전히 box1밑에 box2가 위치해 있는데 뭐죠? 챗gpt는 자꾸 fixed 설정하면 0,0으로 간다는데....


해보니까 오프셋 설정하지않고 fixed만 사용하면 정상적인 배치 그 자리에서 fixed가 적용되는것같은데...


뭐가 맞는건가요?