중첩 된 div의 양식 텍스트 필드를 클릭 할 수 없음

다른 유사한 주제를 다뤘지만 여전히 내 문제를 해결할 수 없었습니다. 다음은 내 양식 코드입니다.중첩 된 div의 양식 텍스트 필드를 클릭 할 수 없음

<div id="footer-left"> 
     <div id="subscribe"> 
      <form action="subscribe.php" method="post"> 
      <input type="text" name="name" value="Enter Your Name"/> 
      <input type="text" name="email" value="Enter Your Email"/> 
      <input type="submit" value="Subscribe"> 
      </form> 
     </div> 
</div>

그리고 다음은 내 CSS 코드입니다.

#subscribe { 
     z-index:5; 
    } 
#footer-left { 
     position:relative; 
     float:left; 
     bottom:0px; 
     width:40%; 
     height:350px; 
     background:#f0f0f0; 
     padding-right:2%; 
     padding-left:5%; 
     padding-top:50px; 
    }

And-index-5는 모든 클래스와 식별자 중에서 가장 높습니다. 그래도 내 텍스트 영역은 클릭 할 수 없습니다.

나는 작은 점을 놓치고 있어야하지만 그것이 무엇인지 알 수는 없다는 것을 알고있다.

도와 주시면 대단히 감사하겠습니다. 감사합니다. .

출처

2014-07-10 Debasish Kanhar

Firebug 또는 다른 브라우저 개발자 도구를 사용하여 입력에 적용되는 스타일 등을 확인해 봤니? –

요소 검사를 통해 다른 요소가 맨 위에 표시 될 수 있습니다. – Popnoodles

왜 Z- 색인을 사용하고 있습니까? 이것은 팝업 형태입니까? – matt

솔루션을 반영하여 업데이트되었습니다. 코멘트에 게시 된 원래 피들에서는 바닥 글 창의 Z- 색인이 -2였습니다. 이것은 어린이 요소에도 영향을 미쳤습니다. 아래 CSS 에서처럼 Z- 색인을 3으로 변경하면 이제 양식을 클릭 할 수 있습니다. 전체 코드는 jsfiddle에 있습니다.

http://jsfiddle.net/cpTZT/2/

HTML

<body onload="scaleImage()"> 
    <div id="map_header" class="expressWay"> 
     <div id="header_tabs"> 
      <div id="header_left"> 
       <div id="logo_banner"></div> 
       <div id="logo"><a href="./"><img src="./images/logo-text.png" style="width:100%;height:100%;" /></a> 
       </div> 
       <div id="tabs"> 
        <ul class="nav"> 
         <li id="city"><span>City</span> 

          <div class="dropDown"> 
           <div class="column" style="margin-left:0px"> <a href="#">Bangalore</a> 
    <a href="#">Chennai</a> 
    <a href="#">Delhi</a> 
    <a href="#">Mumbai</a> 
    <a href="#">Hyderabad</a> 
    <a href="#">Jaipur</a> 

           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="header_right"> 
       <div id="social_links"> <a href="#" class="social_button" id="fb"></a> 
    <a href="#" class="social_button" id="twt"></a> 
    <a href="#" class="social_button" id="gplus"></a> 
    <a href="#" class="social_button" id="pin"></a> 

       </div> <a href="#signIn" id="SignIn">Sign In</a> 

       <img class="dots" src="./images/dots.png" align="center" style="display:inline-block;float:right;margin-right:40px;margin-top:10px;" /> 
       <li id="partner"><span>Partner With Us</span> 
       </li> 
       <div class="clear"></div> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
    <div id="content"></div> 
    <div id="footer"> 
     <div id="footer-left"> 
      <div id="subscribe"> 
       <form action="subscribe.php" method="post"> 
        <input type="text" name="name" placeholder="Enter Your Name" /> 
        <input type="text" name="email" placeholder="Enter Your Email" /> 
        <input type="submit" value="Subscribe"> 
       </form> 
      </div> 
     </div> 
     <div id="footer-right-left"> 
      <ul> 
       <li><b>COMPANY</b> 
       </li> 
       <li>About Us</li> 
       <li>Careers</li> 
       <li>Legal</li> 
       <li>Terms & Conditions</li> 
       <li>Press/Publications</li> 
      </ul> 
     </div> 
     <div id="footer-right-right"> 
      <ul> 
       <li><b>CONTACT US</b> 
       </li> 
       <li>Street No XYX Locality City State,Pincode</li> 
       <li>[email protected]</li> 
       <li>+91-xxxxxxxxxx</li> 
      </ul> 
     </div> 
    </div>

CSS

#footer { 
    position:relative; 
    z-index:3; 
    font-size:0.8em; 
}

내가 JS 바이올린의 원본 코드를 삽입 할 때 영역이 클릭했지만, 사용자가 입력 할 때 텍스트가 사라지지 않았다.

편집 : 질문을 올바르게 해결하기위한 정보가 수정되었습니다.

출처

2014-07-10 12:43:00 abalos

나는 그것을 시도했지만 문제는 지속된다. # footer-left는 #footer의 자식입니다. #footer { \t 위치 : 상대적; \t z- 색인 : -2; \t font-size : 0.8em; } –

문제가 무엇인지 보려면 더 많은 컨텍스트가 필요합니다. 아마 구독 클래스에 중요한 태그를 넣으십시오. – abalos

http://jsfiddle.net/cpTZT/1/ 내 코드는 다음과 같습니다. 친절하게 살펴 봅니다. footer m에 대해 이야기하는 형식이 있습니다. –

중첩 된 div의 양식 텍스트 필드를 클릭 할 수 없음

답변

관련 문제