반응형
📝position (relative , absolute, fixed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
background-color: red;
margin:5px;
position:relative;
color:white;
}
div{
background-color: blue;
color:white;
}
</style>
</head>
<body>
<span style="top:5px">span</span><span style="top:-5px">span</span><span style="bottom:5px">span</span><span style="right:5px">span</span>
<div style="position:absolute; bottom:5px">abc</div>
<span >div는 없어요!</span>
<div style="position: fixed; right:0">sdfsd</div>
</body>
</html>position을 통해 해당 요소의 위치를 옮길 수 있습니다.
- relative
- 해당 요소 위치를 기준으로 top, bottom, left, right를 줄 수 있습니다.
- absolute
- 부모 요소를 기준으로 배치됩니다. 그 기준으로 top, bottom, left, right를 줄 수 있습니다.
- 여기에서는 absolute적용시킨 부모요소가 따로 없기 때문에 그 위에인 body가 조상이 되어서 body 기준으로 위치를 지정받게 됩니다.
- fixed
- 문서 흐름에서 제거 되어서 다른 요소를 밀어내거나 하지 않습니다
- 스크롤바를 내리던 올리던 작업표시줄은 계속 위에 있잖아요 그런 기능입니다. 항상 어딜가든 고정되어 있는 것이죠
📝원하는 DIV 최상단 노출시키기 (z-index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
position:absolute;
}
</style>
</head>
<body>
<div style="left:20px; background-color: blue; z-index: 4;"></div>
<div style="left:40px; background-color: rgb(56, 56, 255); z-index: 3"></div>
<div style="left:60px; background-color: rgb(148, 148, 255); z-index: 2"></div>
<div style="left:80px; background-color: rgb(212, 212, 255); z-index: 1"></div>
</body>
</html>첫번째 사진은 z-index를 적용 안 한 사진입니다. 맨 마지막 div가 맨 위에 올라간 걸 볼 수 있습니다. 하지만 전 반대로 첫번째가 가장 위로가게 하고 싶습니다. 이걸 어떻게 할까요 z-index를 적용시키면 됩니다. z-index를 적용시키려면 position을 꼭 넣어줘야합니다. positon이 있어야 겹치던가 해서 위 아래를 상대적인 숫자 값을 넣어서 정할 수 있으니깐요
z-index는 양수 ~ 음수까지 갖을 수 있습니다. 숫자가 낮을 수록 뒤에 배치되며 숫자가 높을 수록 앞으로 나옵니다.
반응형