z-index 관련질문..
다인
안녕하세요.
mid03의 이미지가 mid02이미지위에 있어야되서 z-index 값을 주려고하는데.. 잘안되서 여쭤봐요^^;;
!-- mid_home --
div class=mid_home
div class=mid01
ul
liimg src=../images/banner01.jpg alt= /pa href=#img src=../images/btn_rightGo01.gif alt= //a/p/li
liimg src=../images/banner02.jpg alt= /pa href=#img src=../images/btn_rightGo02.gif alt= //a/p/li
/ul
/div
div class=mid02
ul
liimg src=../images/manage01.jpg alt= /p class=arrow01a href=#img src=../images/icon_arrow.png alt= //a/p/li
liimg src=../images/manage02.jpg alt= /p class=arrow02a href=#img src=../images/icon_arrow.png alt= //a/p/li
liimg src=../images/manage03.jpg alt= /p class=arrow03a href=#img src=../images/icon_arrow.png alt= //a/p/li
liimg src=../images//manage04.jpg alt= /p class=arrow04a href=#img src=../images/icon_arrow.png alt= //a/p/li
/ul
/div
div class=mid03
img src=../images/img_193X298.jpg alt= /
pimg src=../images/dfsdf.jpg alt= //p
/div
/div
!-- // mid_home --
.mid_home {position:relative; background:#fcc;}
.mid01, .mid02 {float:left; z-index:100;}
.mid01 ul {overflow:hidden;}
.mid01 ul li {float:left; position:relative;}
.mid01 ul li p {position:absolute; bottom:38px; left:38px;}
.mid02 {z-index:100; width:304px; margin-top:9px;}
.mid02 ul li {float:left; position:relative;}
.mid02 ul li img {}
.mid02 ul li p.arrow01 {position:absolute; top:42px; right:32px;}
.mid02 ul li p.arrow02 {position:absolute; top:42px; right:29px;}
.mid02 ul li p.arrow03 {position:absolute; top:39px; right:40px;}
.mid02 ul li p.arrow04 {position:absolute; top:39px; right:18px;}
.mid03 {z-index:1; position:absolute; right:0;}
.mid03 img {border:1px solid #ccc; border-right:none;}
.mid_home:after {content:; display:block; clear:both;}
잘못된 부분 지적부탁드려요 ㅠㅠ
-
흰우유
네 좋은 답변 감사합니다 저두 좋은정보 잘 배워갑니다~^^
-
가온길
의미상으로 보면 목록이나 항목에 문단이 들어가지 말라는 법은 없지요 그리고 li는 순서가 없는 목록형식입니다. 꼭 간단할 필요는 없지요 그래서 어긋난다고 할 순 없습니다 만약 긴 문단이 들어가야 한다면 다른 마크업이 더 효율적일테니 바꾸면 되겠지요
마크업이란게 개인의 성향이 나타나기 때문에 뭐가 맞고 틀리다 판단이 힘듭니다 완전하게 규정을 벗어나지 않는이상 효율적인걸 찾아가는게 최적이겠지요 -
루리
li태그 블락태그 맞네요 잘못된 내용 정정합니다.
들어갈수는 있지만 의미상 잘못된 사용법이라고 할 수 있습니다.
li태그는 말 그대로 list item의 약자로서 간단한 목록이나 항목을 나타낼 때 쓰입니다.
p태그는 문단을 구분하는 용도로서 p태그가 열리고 닫히면 하나의 문단이나 절을 나타냅니다.
결국 레이아웃은 짤 수 있겠지만 웹표준(문서의 의미상)에 어긋나는 태그사용법이라고 할 수 있습니다.
더불어 제가 질문자님의 태그를 확인해봤습니다만,
-
바람
li는 블럭요소입니다 p든 div든 쓸 수 있습니다.
z-index는 레이아웃을 가지고 있는 요소에만 쓸 수 있습니다 position:(relative,absolute,fixed 같은) z-index를 주시려면 해당 속성을 주고 쓰세요~
ex)mid01,02는 없네요~ -
새솔
음 제가알기론 li가 인라인 요소긴 하지만 블록요소가 들어갈수 있는걸로 알고있습니다. 예외로..
그리고 이미지가 포개졌을때 mid02의 이미지가 위로 와야합니다 ㅠㅠ -
힘찬
일단 li태그 안에는 p태그가 들어갈수가 없습니다. li태그는 인라인 태그인데
p태그는 블락태그 이기 때문에 사용법이 잘못되셨습니다.
그리고 확인해 봤는데 현재 말씀하신 이미지가 정상적으로 mid02보다 위에 위치하고 있습니다.
말씀하신 부분이 이미지가 포개졌을때 위치값을 말씀하시는건지 아니면
레이아웃상 이미지가 아래로 내려와서 다음 줄에서 게시되어야 하는지 질문이 모호해서 정확한 답변을
드리기 힘드네요
네이트온 친추해주시면 자세히 설명해드리 -
희미햬
100보다 큰수로 다 줘봤는데도 안되요 ㅠㅠ
-
바름
인덱스값이 낮아서 그래요 위로 드러나게 잡으시려면 101값을 주시면 됩니다 낮을수록 아래에 깔려요
-
아이폰
z-index 값이 클수록 위로 올라오는거 아닝가효? ㅎㅎ