title: Position fixed close button of Bootstrap modal styling is not displaying properly at internet explorer
body: <p>I am working on a website which used <strong>Bootstrap 3.0.2</strong> version. I have styled a modal close button which displayed properly in all browsers except internet explorer (I have checked at ie 11). Basically, to make it look like this,</p>
  
  <p><img src="https://i.imgur.com/js6hFUG.png"></p>
  
  <p>I have used this CSS:</p>
  
  <pre><code>.modal-header .close {
      position: fixed;
      top: -10px;
      right: -10px;
      width: 23px;
      height: 23px;
      opacity: 1;
      z-index: 10;
  }
  </code></pre>
  
  <p>The reason behind using <code>position: fixed;</code> instead of <code>position: absolute;</code> was wired. At the time of using <code>position: absolute;</code> it could not show it's half portion due to negative top and right value. screenshot:</p>
  
  <p><img src="https://i.imgur.com/NqzX9LX.png"></p>
  
  <p>That's why, I used position: fixed; which worked perfectly at every browsers. But, internet explorer is displaying this cross button like this way:</p>
  
  <p><img src="https://i.imgur.com/vJHrRrD.png"></p>
  
  <p>How can I fix this for internet explorer?</p>
  
  <p><strong>Note:</strong> it's not possible for me to upgrade the bootstrap version for some reason :/</p>
  
  <p><a href="https://jsfiddle.net/learner73/0vLtpsr6/1/" rel="nofollow noreferrer">Fiddle Work</a></p>