Z- 색인 및 jquery가있는 디스플레이 인라인 블록

안녕하세요 여러분, 안녕Z- 색인 및 jquery가있는 디스플레이 인라인 블록

나는 약간의 문제가있는 것처럼 보입니다. div가 다른 div에 겹치기를 원하지만 zIndex가 작동하지 않습니다. 원인이 디스플레이라고 생각합니다. 인라인 블록이지만 웹 페이지가 올바르게 표시되도록 유지해야합니다. div 오버레이를 다른 오버레이로 만들려면 어떻게해야합니까?

http://jsfiddle.net/Yf7zD/

또는 바로 여기 코드 :

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
<script type="text/javascript" src="javascript/cookies.js"></script> 
<style> 
#gameTable { 
    font-size: 0; 
    width: 840px; 
    height: 240px; 
    margin-top: 20px; 
    margin-left: 78px; 
    position: relative; 
} 
.iamdroppable { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    border: 3px solid #FFF; 
} 

</style> 
</head> 

<body style="background-color: black;"> 
<div id="container" style="position:relative; border: solid 3px red;"> 
<div id="gameTable"><p>GameTable</p> 
</div> 
</div> 
</body> 
<script> 
$(document).ready(function(e) { 
var myId; 
    for(vertical = 0; vertical < 3; vertical++) { 
    for(horizontal = 1; horizontal <= 12; horizontal++) { //Outer Numbers 
      if(vertical == 0) 
      myId = horizontal * 3; 
      else if(vertical == 1) 
      myId = horizontal * 3 - 1; 
      else 
      myId = horizontal * 3 - 2; 
      $('<div>', {//Normal numbers 
       class: 'iamdroppable', 
       id: '' + myId, 
       width: '62px', 
       height: '78px', 
      }).appendTo('#gameTable'); 
    } 
    } 
    $('<div>', {//Quads 
       class: 'iamdroppable', 
       id: '1000', 
       top: '-100px', 
       width: '100px', 
       height: '200px', 
       zIndex: '1000', 
       position: 'absolute', 
      }).appendTo('#container'); 
      }); 
</script> 
</html>

감사

다음은 문제를 설명 jsfiddle입니다!

출처

2013-04-25 problemo

var div = $('<div>', {//Quads 
      class: 'iamdroppable', 
      id: '1000', 
      top: '-100px', 
      width: '100px', 
      height: '200px', 
      zIndex: '1000', 
      position: 'absolute', 
     }).appendTo('#container'); 
     }); 
$('body').append(div);

출처

2013-04-25 13:43:24 picios

답을 고맙습니다! – problemo

당신은 속성과 CSS 스타일을 추가하고, 그들이 모든 스타일의 숙박 시설 내에 있어야합니다 :

이 비교하고있는 또 다른 메모에

$(document).ready(function (e) { 
     var myId; 
     for (vertical = 0; vertical < 3; vertical++) { 
      for (horizontal = 1; horizontal <= 12; horizontal++) { //Outer Numbers 
       if (vertical === 0) myId = horizontal * 3; 
       else if (vertical == 1) myId = horizontal * 3 - 1; 
       else myId = horizontal * 3 - 2; 
       $('<div>', { //Normal numbers 
        class: 'iamdroppable', 
        id: '' + myId, 
        style: 'width:62px;height:78px;' 
       }).appendTo('#gameTable'); 
      } 
     } 
     $('<div>', { //Quads 
      class: 'iamdroppable', 
      id: '1000', 
      style: 'top:-100px;width:100px;height:200px;z-index:1000;position:absolute;' 
     }).appendTo('#container'); 
    });

: if (vertical == 0) 세를 사용해야을 = == 이런 식으로 : if (vertical === 0)

출처

2013-04-25 13:43:41 kais

jQuery는 스타일 객체의 속성으로 일부 * 속성 (너비 및 높이)을 실제로 만들어야한다고 올바르게 해석합니다. 그러나 z-index, top, 또는 left에서는 작동하지 않는 것처럼 보입니다. – bfavaretto

위의 @bfavaretto의 의견에 동의합니다. 좀 더 자세히 들여다 보았습니다. 감사. – kais

스타일 속성을'.css' 호출로 옮기는 것이 효과가있는 것 같습니다 : http://jsfiddle.net/Yf7zD/1/ – bfavaretto

Z- 색인 및 jquery가있는 디스플레이 인라인 블록

답변

관련 문제