창크기에 따라 자리가 밀리는 콘텐츠 질문 채택완료
/*header*/ #header {width:100%; height:265px; margin: 0 auto; /*border-bottom: 1px solid #eee; */ background-color:#FFDD00;}
#header:after{content:""; display:block; clear:both;}
.border{border-bottom: 1px solid #F4CD00; position: absolute; width:100%; top:30px;}
.mn01{width: 1100px; height: 230px; margin: 0 auto; background-color:#FFDD00;}
.info_ul1{position:absolute; padding-left: 2px; top:5px;}
.info_ul1 li{display: inline-block; }
.info_ul1 li a{font-size:11px; color:#333; }
.info_ul1 li a:hover{border-bottom: 1px solid #666;}
.acc{color:#80BE25; font-size: 13px;}
.info_ul2{float:right; position: absolute; left:1065px; top:5px; z-index: 9999;}
.info_ul2 li {display: inline-block; line-height: 11px; text-align: center;}
.info_ul2 li a{font-size:12px; color:#333;}
.info_ul2 li a:hover{border-bottom: 1px solid #333;}
.login a{color:gray;}
.login a:hover{color:#0074A4; border-bottom:1px solid #0074A4 !important;}
.info_dl{background-color:white; border:1px solid #666; padding: 7px 0 7px 7px; width:100%; height:100%; margin-top: 10px;}
.info_dl{text-align: left;}
.info_table01{position: absolute; right:214px;}
.info_table02{position: absolute; right:138px;}
.info_table03{position: absolute; right:71px;}
.info_dl1 a, .info_dl2 a, .info_dl3 a {font-size:11px; color:gray; text-align: center; line-height: 18px;}
.info_dl{display:none;}
==================================================================================
#section{width:100%; height:100%; background-color:#fff;}
#fixed{position:fixed; margin: auto; top:33%; left:15%;}
#fixed ul{/*padding: 30px 0 0px 285px;*/ }
#fixed ul li{padding-bottom: 10px;}
#top{position:fixed; right:17%; top:90%;}
#top a{font-size: 14px; color:white; font-weight:bold; color:#0074A4; text-align: center;}
#top{background-image: url(/image/main/top.jpg);}
안녕하세요
인터넷 창을 작게하면 로그인 로그아웃 등 글씨가 밀려움직이고
픽시드를 준 따라다니는 콘텐츠도 창 크기에 따라 자리를 자꾸 이동하는데
안그러게 하려면 어떻게 해야하나요? ㅠㅠ 창크기를 최대로 화면에 맞췄을때만 원하는 대로 나오고
창을 작게하거나 화면을 확대/축소해도 이동하네요 ㅠㅠ 어떤 게 문제인지 알려주세요 ㅠㅠㅠ
답변 2개
position:absolute 를 저런식으로 사용하시면 창크기에 따라 당연히 틀어질 수 밖에 없습니다.
1. position:absolute 상위 엘리먼트의 크기를 되도록 고정시키는게 좋을 듯 하구요,
2. 레이아웃에 따라 position:absolute의 위치를 left로 포지션 잡을지 right로 포지션 잡을지 고려하시고
3. fixed의 레이아웃이 어떤지 모르겠는데 top이나 left를 %에서 px로 변경 가능하면 그렇게 처리하시는게 좋을 듯 합니다.
4. 창크기에 따라 다른 px값이나 %값을 주고 싶으시면 css media query 로 검색해보시고 반응형으로 작업해주시는게 좋을 듯 합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인


