fixed가 div안에서 넘칠때, 중앙정렬 방법

fixed를 적용하였더니 밖으로 튀어나오는 대참사가 벌어졌다.

상위 div에 relative를 넣어도 먹지않았는데

그 이유는 fixed는 viewport를 참조하기 때문이라고한다.

 

left: 0;
padding: 0 20px;
width: 90%;
right: 0;
margin: 0 auto;

 

팝업의 상단이었기때문에 일정한 간격만 넣어주면되서 위처럼 코드를 작성하여 해결하였다.

이외 max-width값을 넣어서 일정크기이상부터는 고정하게하였다.

 

+ 추가

Fixed 버튼 중앙정렬

.fixed-button {
  position: fixed;
  bottom: 0; /* 화면 하단에 고정 */
  left: 50%; /* 화면 중앙에 정렬하기 위해 왼쪽 50% 위치 설정 */
  transform: translateX(-50%); /* 가로 방향으로 -50% 이동하여 중앙 정렬 */
  padding: 10px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

<button class="fixed bottom-0 left-1/2 transform -translate-x-1/2 p-4 bg-blue-500 text-white rounded">고정된 버튼</button>