css3 / 위치속성 - 상하좌우, position: absolute, relative, height, z-index, overflow

mungee 2019. 8. 21. 16:43

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body { margin: 0; padding: 0; } /* body태그가 기본적으로 갖고있는 margin padding값 때문에 딱 모서리에 안맞음. 그래서 0, 0으로 주게 되면 정확하게 100px, 100px 위치에 맞물려서 출력됨. */

/*기본적으로 left(x좌표) top(y좌표)을 많이 사용. 참고로 상하좌우 모두 지정된 상태에서는 left, top이 기본적으로는 우선이 되는데, */

.box { width: 100px; height: 100px; /*만약 width와 height 크기를 별도로 지정안했다면 상하좌우(position 관련속성)만으로도 크기를 잡을 수 있음. 다만 이때 position 속성을 같이 써야함.*/

position: absolute; }(자식) /* 1. position : 태그의 위치를 잡는 방식을 변환할 때 사용하는 속성.

position은 기본적으로 키워드로 absolute 많이 씀. absolute 사용하면 기본적인 좌표잡는 방식을 무시하게 되고

"절대적"인 위치로 좌표를 잡게됨. 이 좌표를 설정할 때 사용하는 속성이 left top right bottom

absolute로 지정된 애들은 다른 태그들의 위치에 전혀 영향을 끼치지 않게됨.

심지어 부모태그(body)도 자식태그(div*3)을 못알아보고 전혀 자식의 크기/위치에 영향을 받지 않아서

자식들을 제외하고만 크기를 잡는다.*/

.red { background-color: red;

left: 100px; top :100px; right: 100px; bottom: 100px; /*왼쪽에서 100, 위에서 100px만큼 떨어진 곳에 위치*/

z-index: 1000; } /*태그의 상하관계 지정. body태그에서 가장 나중에 입력한 blue가 기본적으로 맨앞에 오게되는데 이를 바꿔줌. z-index속성은 position: absolute를 지정했을 때 함께 많이 사용됨. */

.green { background-color: green;

left: 150px; top: 150px;

z-index: 100; }

.blue { background-color: blue;

left: 200px; top: 200px;

z-index: 0; }

.container { position: relative; (부모) /*를 넣어 위치를 잡게만들 수 있음.*/

/*이게 없을땐 자식이 화면전체를 기준으로 위치를 잡아 부모위치에 신경안써, 겹칠 수 있음.

즉 h1태그의 Hello글자와 박스들이 겹침.

이게 있을땐 position:relative가 붙은 부모태그를 기준으로 위치를 잡게된다.

따라서 자식의 position 속성이 absolute라면, !!!1. 그 부모에 position: relative를 준다.*/

height: 100px; /*height을 넣어 높이를 강제설정해주거나 or (height 지우고) body에

p태그넣고 글자 넣어서 위치를 설정해주는 등 position: absolute를 지정한 자식의 !!!2. 부모의 높이를 강제로 설정할 수 있는 별도의 방법으로, 높이를 적용해서 자식을 감싸게 해야한다. >height / p태그 */

/*이 1,2 두가지가 함께 들어간다.*/

overflow: scroll; } /*p태그를 넣고도 height을 강제로 지정할 경우 p와 아래 h2 태그가 충돌됨. */

/*오버플로우된 body태그의 글자들과 충돌. hidden or scroll*/

</style>

</head>

<body>

<h1>Hello</h1>

<div class="container">(부모)

<p>Ut adipisicing exercitation quis sit laboris et laborum sit nisi irure ad proident. Reprehenderit et et incididunt officia. Ipsum laborum cillum veniam elit id nisi ullamco cupidatat sunt irure. Esse pariatur tempor excepteur pariatur dolore. Reprehenderit anim est aliquip est consequat officia officia minim irure irure deserunt nostrud eiusmod.</p>

<p>Excepteur sunt tempor occaecat consectetur consequat eu veniam elit exercitation aliquip laborum cupidatat labore. Aliqua qui qui officia dolore officia anim est ad minim ut sunt tempor anim. Pariatur do Lorem veniam esse fugiat magna consequat est do. Fugiat cupidatat consequat amet velit eiusmod.</p>

<p>Id duis pariatur sit incididunt occaecat in exercitation occaecat dolor nulla duis ut aliquip magna. Eiusmod quis ea sint laboris pariatur excepteur qui adipisicing deserunt consequat consectetur. In culpa ex exercitation velit exercitation culpa. Enim adipisicing magna labore id voluptate nulla ex. Reprehenderit anim sint pariatur officia pariatur laborum velit id exercitation do. Velit dolore non occaecat sunt.</p>

</div>

<h2>Hello</h2>

</body>

</html>