아래 그림처럼, 배경 이미지 위에 검색기능을 넣고싶으면 어떻게 할까요?
div 가장 위에 노출시키려면 z-index를 100 또는 큰 수를 넣으면 된다.
.div01{
left : 10px;
background-color: red;
z-index: 1000;
}
.div02{
left : 50px;
background-color: blue;
z-index: 2;
}
.div03{
width : 200px;
height : 200px;
left : 200px;
top: 200px;
background-color: gray;
}
position에 대해 알아보자. position 속성은 레이아웃을 배치하거나 객체를 위치시킬 때 사용한다.
static이 디폴트다. 위치값을 줘도 먹히지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
div{
position:static; /* 디폴트 : static */
left: 50px;
width: 150px;
height: 150px;
}
.div01{
background-color: red;
right : 100px;
}
.div02{
background-color: blue
}
</style>
<body>
<div class = "div01">첫번째 사각형 </div>
<div class = "div02">두번째 사각형 </div>
</body>
</html>
absolute : 부모 기준 left-top 으로부터 시작한다. 부모가 없는 경우 화면의 left-top.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
div{
position:absolute; <!--> absolute 인 경우, 좌측상단을 기준으로 그려짐 <-->
width: 100px;
height: 100px;
}
.div01{
left : 50px;
background-color: red;
z-index: 1000;
}
.div02{
top : 50px;
background-color: blue;
z-index: 2;
}
.div03{
width : 200px;
height : 200px;
left : 200px;
top: 200px;
background-color: gray;
}
</style>
<body>
<div class = "div01">첫번째 사각형 </div> <!-- 부모 기준 left top 이지만 ,부모가 없기때문에 화면 왼쪽위 기준 -->
<div class = "div02">두번째 사각형 </div>
<div class = "div03"> <!-- 부모의 기준으로 left top 구성 -->
<div class = "div01"></div>
</div>
</body>
</html>
relative : 원래 있어야 할 위치를 기준으로 설정한 위치값 만큼 움직여서 실행된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
div{
position:relative;
width: 100px;
height: 100px;
}
.div01{
left : 50px;
background-color: red;
z-index: 1000;
}
.div02{
top : 50px;
background-color: blue;
z-index: 2;
}
.div03{
width : 200px;
height : 200px;
left : 200px;
top: 200px;
background-color: gray;
}
</style>
<body>
<div class = "div01">첫번째 사각형 </div>
<div class = "div02">두번째 사각형 </div>
<div class = "div03">
<div class = "div01"></div>
</div>
</body>
</html>
fixed : 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.
브라우저 화면의 상대위치를 기준으로 위치가 결정된다.
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] 박스모델 심화(#id, .class, display, float, visibility, padding, margin, border, text-align 등) (0) | 2020.06.15 |
|---|---|
| [CSS] 박스모델 (padding, text-align, border-style, border-color, border-width 등) (0) | 2020.06.12 |
| [CSS] 박스모델 : margin, padding 차이점 (0) | 2020.06.12 |
| [CSS] CSS 적용 방법_2_(선택자 활용) (0) | 2020.06.12 |
| [CSS] CSS 적용 방법(인라인 방식, embeded 방식, import 방식, link 방식) (0) | 2020.06.12 |
