position:relative / position

// 발단 

application메뉴중 AI VOICE Bot에서 콜봇이미지가 계속 올라온다.

 

코드를 확인한 결과 

 그 앞페이지에 '화자분리대면상담'에서 position:relative와 absolute를 썼었는데

( '화자분리대면상담'에서 position빼도 가운데로 잘간다..왜 내가 이걸 쓴거지...)

 

그거때문에 이미지가 위로 올라온것이다.

이 예를 보고 postion에대해 더 깊게공부해보자.

 

아래코드

<div class="little-content">
					<div class="little-img_container40">
						<div class="callimg_container40">
							<img src="./img/applications/chatbot.svg"/>
						</div>
					</div>
					
					<div class="little-img_container40">
						<div class="callimg_container40">
							<img src="./img/applications/chatbot-text.svg"/>
						</div>
					</div>
					
				</div>

 

.little-img_container40 {
	max-width:50%;
	width:100%;
	height:100%;
	padding:10px;
	/* border:1px solid red; */
	
	/* position:relative; */
}
.little-img_container40 img {
	width:80%;
	margin:0 auto;
}

.little-img_container40.text-box60{
	max-width:80%;
}

.callimg_container40 {
	width:100%;
	/* border:1px solid blue; */
}

.callimg_container40 img {
	max-width:100%;
	width:80%;
	margin:0 auto;
	/* position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
}

위의코드에서 .callimg_container40 img  이부분에서 position을 주니 화면에 붕~ 떠있지!!!