1. 레이아웃을 좌표 속성으로도 배치 가능
position: relative;
를 먼저 선언해야 함
.main-button {
position: relative;
top: 100px;
left: 100px;
}
2. position: relative; 부여하면
1) 좌표이동가능
2) 공중에 뜸
3. position: static -> 좌표이동 X
4. position: fixed -> 현재 화면이 기준
스크롤해도 화면에 고정하고 싶을 때 사용
5. position: absolute -> 내 부모 중 postion: relative 속성을 가진 태그가 기준
가운데 정렬하려면
.main-button {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 500px; // 적절하게 지정
}
반응형
'Knowledge Wiki > HTML&CSS' 카테고리의 다른 글
[ HTML/CSS ] <select>, <textarea> (0) | 2021.12.07 |
---|---|
[ HTML/CSS ] <input> type별 CSS 스타일링 (0) | 2021.12.07 |
[ HTML/CSS ] margin collapse 현상 (0) | 2021.12.07 |
[ HTML/CSS ] <a> 태그 밑줄 제거, text-decoration (0) | 2021.12.07 |
[ HTML/CSS ] 그림과 배경 레이아웃 맞추기 (0) | 2021.12.07 |