# Position과제 & width & box-sizing
**겹치는 박스 만들기**
당연히 position 속성을 사용하면 되겠죠?
absolute, relative, fixed 중 하나를 사용하면 됩니다.
하지만 박스를 만들 때 주의점이 하나 있습니다.
원래 div 박스의 width를 주게되면 padding, border를 고려하지 않습니다.
padding 안쪽 부분만 실제 width로 설정합니다.
그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있습니다.
웹사이트 대충 만드는 초보는 별 상관 없겠지만
실제 업무에서는 사이즈 조금만 잘못되어도 다른 요소에 크게 영향을 줄 수 있습니다.
**박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성**
```css
.box {
box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}
```
<div class="explain-box">
<h4>How we design our shoes</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
```css
.explain-box {
width: 700px;
margin: auto;
padding: 20px;
text-align: center;
background: #eee;
position: relative;
top : -40px;
}
```
### z-index : 높을수록 앞에온다.
{% embed url="" %}
### max-width
width %는 pc사이즈에서 너무 크게 표현된다.
```css
.explain-box {
width: 80%;
max-width: 600px;
}
```
반응형 layout 만들때 min, max width, height 사용하면 깔끔한 레이아웃 만들때 유용하다.
**CSS 파일 작성시 기본으로 쓰면 좋을 속성들**
```css
div {
box-sizing : border-box;
}
body {
margin : 0;
}
html {
line-height : 1.15; /*기본 행간 높이*/
}
```
여기에 더해서
모든 h, p 태그의 margin을 균일하게 설정하거나
li, a 태그에 text-decoration : none 을 주거나
나중에 배울 table 태그에 border-collapse: collapse 를 주거나
이런 것들이 가능합니다.
이런거 미리 적고 시작하면 항상 편리하게 CSS 코드를 짤 수 있습니다.
가끔 CSS Reset 이런 식으로 부르기도 합니다.
여러분도 기본으로 복붙하고 시작할 **"필수 기본값 CSS 리스트"**를 하나 만들어두고 맨날 업데이트 해보십시오.
**CSS normalize**
그리고 이런 것 뿐만 아니라 브라우저간 통일된 스타일을 주기 위해
특정 스타일을 맨 위에 적고 CSS 코드짜기 시작하는 경우도 있습니다.
왜냐면 브라우저마다 \