css position 문의드립니다
본문
css만 가지고 홈피 만들면 머리 쥐날것 같네요 ㅡ,ㅡㅋ;;
position때문에 고생중인데 도움주실 고수님들 찾습니다~ *^^*
html5로 제작하고 있구요..
현재 대략적인 내용은 아래와 같습니다.
<div class="content">
<div style="position:relative; width:1000px;">
<div style="position:absolute; width:400px; height:600px; top:0px; left:0px;">
<div style="position:absolute; width:500px; height:600px; top:0px; left:400px">
<div style="position:absolute; width:100px; height:600px; top:0px; left:900px">
</div>
<div style="position:relative; width:1000px;">
<div style="position:absolute; width:200px; height:600px; top:0px; left:0px;">
<div style="position:absolute; width:300px; height:600px; top:0px; left:200px">
<div style="position:absolute; width:500px; height:600px; top:0px; left:500px">
</div>
</div>
이런 식으로 구성하고 있는데요..
물론 인라인이 아니라 css파일에 있는걸 style로 따왔습니다.
근데 문제는 아래 div가 위쪽으로 올라와서 덮어버리더라구요.. ㅠㅠ
relative 포지션의 height 가 없어서 그런건지 어쩐건지를 모르겠습니다.
도움좀 부탁드립니다 ^^
답변 2
지금 코드만 봐서는 position absolute 를 굳이 사용할 이유가 없을 것 같은데요.
absolute 를 float:left 로 바꾸시고, float 해제해주시는 방법으로 바꿔볼 수 있는데, height:600px 값이 변경될 때 relative div height 값을 바꿔주지 않아도 되는 장점이 있습니다.
편의상 absolute div 를 .abs relative div 를 .rel 이라고 한다면 스타일은
(width 는 각자 지정)
.abs {position:relative;width:1000px}
.abs:after {display:block;visibility:hidden;clear:both;content:''}
.abs .rel {float:left;height:600px}
이렇게만 하셔도 될겁니다.
아~ 지운아빠님 오래만에 뵙습니다~ ^^
제가 스타일의 위치 예를 잘못 들었네요 ㅎㅎ
absolute를 준 이유가 각각의 relative안의 absoulte div 박스들의 위치가 예를 든것처럼 얌전히 있는게 아니라
위치가 그때그때 달라져서 top,left로 위치조정을 좀 해줘야 하거든요..
그래서 위치에 따라 relative 높이가 뒤죽박죽이 됩니다. ㅎㅎ
위쪽 relative div에 height를 주면 쉽게 해결이 되겠지만
위쪽 relative div 안에 들어가는 absolute div들의 높이 값에 따라 아래쪽 relative div가 위에 덮어버리지 않고 위의 높이에 따라 내려오는 방법을 찾고 있었습니다.
height 값 설정하면 됩니다~
높이값 안주고 위쪽 높이의 유동성에 따라 아래쪽 div가 덮히지 않고 그 아래로 내려왔으면 해서요..^^
답변을 작성하시기 전에 로그인 해주세요.
