为什么我的div不能固定在屏幕上？

Question

我正在创建一个应该在屏幕上固定的弹出窗口，但是由于某种原因它将无法正常工作。这是代码...

Html。

<div id='hear-about-us-div' style='display:block'>
<h2 id='hdyhau-header'>How did you hear about us?</h2>
<form name='hear-about-us-form'>

  <label>Facebook</label>
  <input type='checkbox' name='facebook' />
  <label>Instagram</label>
  <input type='checkbox' name='instagram'/>
  <label>Friends or family</label>
  <input type='checkbox' name='friendsOrFamily'/>
  <label>Email</label>
  <input type='checkbox' name='email'/>
  <label>Other</label>
  <input type='checkbox' name='other'/>

  <input type='submit' value='Submit'/>
</form>
</div>

CSS。

 #hear-about-us-div {
   display: block;
   width: 50%;
   text-align: center;
   left: 25%;
   height: 250px;
   position: fixed;
   background-color: #EB8364;
   z-index: 101;
 }