引導表單輸入字段和按鈕不可點擊

我有一個表單，其中有兩個輸入字段和一個按鈕。第一個輸入字段正常工作，但第二個輸入字段和按鈕都不可點擊。引導表單輸入字段和按鈕不可點擊

注意：遵循堆棧溢出規定，所有codepen鏈接後面都有代碼。所以這篇文章可能看起來不太長。

這是頁面的Codepen。見下面的代碼。

HTML`

<body> 
    <div class="container-fluid"> 

     <div class="row" id="row-masthead"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 

       <div id="logo-enclosure"> 
        <img src="justlogo.png" alt="" id="logo"> 
       </div> 

       <div id="masthead-welcome-note"> 
        <h1>Wow Your Customers</h1> 
       </div> 

       <div id="masthead-welcome-note-small">with exceptional customer service. Try Hiver!</div> 

       <div id="form-enclosure"> 
        <form> 
         <div class="form-group"> 
          <label for="input-email">Enter email</label> 
          <input type="email" class="form-control" id="input-email"> 
         </div> 
         <div class="form-group"> 
          <label for="input-phone">Enter phone</label> 
          <input type="email" class="form-control" id="input-phone"> 
         </div> 
         <button type="submit" class="btn btn-default">GET STARTED FOR FREE</button> 
        </form> 
       </div> 


      </div> 
     </div> 

     <div class="row" id="row-reviews"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> <!-- column 12--> 

       <div id="image-quote-container"> 
        <i class="fa fa-quote-left" aria-hidden="true"></i> 
        <div id="circular-image-container"> 
         <img src="bean.png" id="circular-image"> 
        </div> 
        <div id="quote"> 
         Hiver is hands down the best way for us to collaborate on Gmail. Managing our scheduling has never been easier. 

         <footer><strong>Christian Leybold - (General Partner, eVentures.vc)</strong></footer> 
        </div> 
       </div> 

       <div id="close-quote-container"> 
        <i class="fa fa-quote-right" aria-hidden="true"></i> 
       </div> 

      </div> 
     </div> 

     <div class="row"> 

     </div> 

     <div class="row"> 

     </div> 

    </div> 
</body>

CSS

body{ 
    overflow-x: hidden; 
    height: 100vh; 
} 

.container-fluid{ 
    padding: 0; 
} 

#row-masthead{ 
    background-color: #069A78; 
    height: 27vh; 
} 

#logo-enclosure{ 
    background-color: ; 
    margin-top: 1%; 
    margin-left: 4%; 
} 

#logo{ 
    width: 120px; 
    height: 48px; 
} 

#masthead-welcome-note h1{ 
    font-family: 'Ubuntu', sans-serif; 
    color: white; 
    margin-left: 4%; 
    margin-top: 1%; 
    font-size: 42px; 
    background-color: ; 
} 
#masthead-welcome-note-small{ 
    font-family: 'Open Sans', sans-serif; 
    margin-top: -0.5%; 
    margin-left: 4%; 
    font-size: 18px; 
    color: white; 
    background-color: ; 
} 

#form-enclosure{ 
    background-color: white; 
    border-radius: 2%; 
    padding-top: 15px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 15px; 
    width: 25%; 
    position: absolute; 
    right: 6%; 
    top: 48%; 
    border-bottom: 1.5px solid #D1D1D1; 
    border-right: 1px solid #D3D3D3; 
} 

#form-enclosure > form > div > label{ 
    color: #B0A9A9; 
    font-weight: normal; 
    font-size: 13px; 
} 

#form-enclosure > form > div > input{ 
    background-color: #F3F3F3; 
    border-color: #ECECEC; 
} 

#form-enclosure > form > button{ 
    width: 100%; 
    height: 2.8em; 
    color: white; 
    background-color: #E87A06; 
    border: none; 
    font-weight: bold; 
    font-size: 12px; 
} 

#row-reviews{ 
    height: 30vh; 
    background-color: #F6F6F6; 

    /*border: 1px solid lightgrey;*/ 
} 

#row-reviews > div{ /* this is the column inside the row */ 
    height: 100%;  /* the column should take full height of the row ie 30vh */ 
    background-color: ; 
    display: flex; 
    justify-content: left; 
    align-items: center; 
} 

#image-quote-container{ 
    margin-left: 4%; 
    width: 52%; 
    height: 90%; 
    position: relative; /*relative parent*/ 

    /*border: 1px solid lightgrey;*/ 
} 

i.fa-quote-left{ 
    font-size: 30px; 
    color: lightgrey; 
    margin-top: 4%; 
    float: left; 
    width: 3%; /* to prevent jumping effect*/ 

    /*background-color: plum; 
    border: 1px solid black;*/ 
} 

#circular-image-container{ 
    margin-left: 3%; /* moving bean image right from open quote*/ 
    margin-top: 6%;  /* moving bean image bottom from its reference point ie parent div*/ 
    margin-right: 5%; /* maintain distance between image and texts on the right*/ 
    float: left; 
} 

#circular-image{ 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 

    border: 1px solid #E4E4E4; 
} 

#quote{ 
    margin-top: 7%; 
    font-family: 'Open Sans', sans-serif; 
    font-style: italic; 
    font-size: 14px; 
    text-align: justify; 
    color: #7f8c8d; /* grey color for text */  

    /*border: 1px solid black;*/ 
} 

footer{ 
    font-style: normal; 
    font-size: 12px; 
    color: #2c3e50; 
    margin-top: 2%; 
} 

#close-quote-container{ 
    width: 3%; 
    height: 90%; 
    position: relative; /* relative parent for absolute close quote*/ 

    /*border: 1px solid lightgrey;*/ 
} 

i.fa-quote-right{ 
    font-size: 30px; 
    color: lightgrey; 
    position: absolute; 
    left: 0; 
    bottom: 0; 

    /*border: 1px solid black;*/ 
}

然而，當我在=>Another pen link把形式單獨它似乎很好地工作（即相同代碼，但在這裏輸入字段和按鈕是可點擊的）。請參見下面的代碼：

HTML

<body> 
    <div id="form-enclosure"> 
        <form> 
         <div class="form-group"> 
          <label for="input-email">Enter email</label> 
          <input type="email" class="form-control" id="input-email"> 
         </div> 
         <div class="form-group"> 
          <label for="input-phone">Enter phone</label> 
          <input type="email" class="form-control" id="input-phone"> 
         </div> 
         <button type="submit" class="btn btn-default">GET STARTED FOR FREE</button> 
        </form> 
       </div> 
</body>

CSS

body{ 
    background-color: plum; 
} 

#form-enclosure{ 
    background-color: white; 
    border-radius: 2%; 
    padding-top: 15px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 15px; 
    width: 25%; 
    position: absolute; 
    right: 35%; 
    top: 30%; 
    border-bottom: 1.5px solid #D1D1D1; 
    border-right: 1px solid #D3D3D3; 
} 

#form-enclosure > form > div > label{ 
    color: #B0A9A9; 
    font-weight: normal; 
    font-size: 13px; 
} 

#form-enclosure > form > div > input{ 
    background-color: #F3F3F3; 
    border-color: #ECECEC; 
} 

#form-enclosure > form > button{ 
    width: 100%; 
    height: 2.8em; 
    color: white; 
    background-color: #E87A06; 
    border: none; 
    font-weight: bold; 
    font-size: 12px; 
}

我無法理解這種行爲。請幫我理解我做錯了什麼。

謝謝！

來源

2017-06-17 Swagnik Dutta

減少大小col-md-6 col-sm-6 col-xs-12（這種測量是隻是爲了測試，您必須確定需要你測量）

元素的圖像中所強調是越來越重疊在輸入的文本元素，這讓按鈕既不可點擊

元素

更新答： 當您添加的位置是：絕對的，元素是從normalflow取出。所以其他元素優先於具有絕對定位的元素。正常流量元素優於絕對元素。您也可以使用z-index來解決此問題。

add z-index：1;對於具有position：absolute的元素。這也可以解決你的問題。我認爲這將是比我在第一

來源

2017-06-17 08:17:17 divine

提到謝謝你，工作的方式更容易。我不知道不適當的色料大小會產生這樣的效果。請糾正一下我的理解。我覺得，由於包含表單的div具有'position：absolute'屬性，它將會在DOM中失去它的空間並且首先浮動。我的問題是，爲什麼列大小會影響一個浮動的div，而不是DOM的一部分？ –

@SwagnikDutta請檢查我更新的答案。如果它解決了你的問題，也接受答案。 – divine

感謝您的更新。真的有用:) –

引導表單輸入字段和按鈕不可點擊

回答

相關問題