테스트 사이트 - 개발 중인 베타 버전입니다

CSS.. 좌 하단에 배너 위치시키기..

· 7년 전 · 6014 · 5

간혹 클라이언트들로 부터 요청을 받다보면..

좀 의아한 요청 또는 생각지도 못한 요청을 받게 됩니다.

 

이번 제가 진행한 요청사항은.. 좌 메뉴 하단에 연락처 배너를.. 

콘텐츠 길이와 관계없이 무조건 하단에 뜨게 해달라고 요청을 받았네요..

 

콘텐츠 최하단 무조건 고정이 아닌 좌 메뉴 안에서 하단이라니 ㅜ

 

한 40분 헤매서 저와 같이 고생하지 말자는 의미로 공유합니다.

저희는 시간이 돈이자나요.

 

#leftmenu {position: relative; width: 100px; height: 125px;}
#tel {position: absolute; right: 10px; bottom: 10px;}

<div id="leftmenu">
  <div id="tel">
    내용입니다
  <div>
<div>

 


바깥 div의 position 속성을 relative로 두면

자식 div인 #tel이 absolute속성을 가지게 되어도 부모 사이즈 안에서 움직이게 됩니다.

 

예시를 막 적다보니 좀 적당하지 않지만...

제 경우엔 콘텐츠를 둘러싸는 wrapper div안에 위치시켜 처리했네요..

 

사소하지만 저와같이 css에 약한 개발자분들께 도움이 되길..

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

잘 보고 갑니다.^^
제가 가장 취약한 부분이 CSS입니다.
CSS 학습하기 좋은 사이트 소개 좀 부탁드립니다.
굿팁 고맙습니다.
7년 전
저도 공부를 하다보면 CSS는 어렵더라구요 그래서 늘 구글에서 검색해서 이리저리 맞춰보곤 합니다 ㅜ 따로 공부하려 찾아보고 그러진 않아요 일하다보면서 필요에 따라서 보다보니까요..
뭐 개발이 그렇겠지만 니즈가 거의 정해져있다시피 해서 여러 조건에 맞춰 개발하다 이전에 했던걸 응용하곤 합니다
좋아요..잘쓰겠습니다.감사합니다.
7년 전
좋은 팁이네요

게시글 목록

번호 제목
24318
24317
24315
24309
24294
24293
24277
24262
24260
24253
24251
24236
24233
24228
24226
24221
24214
24203
24201
24199
24196
24195
24194
24192
24191
24187
24185
24183
24172
24168