title: Position doesn't work on IE 11
body: <p>I've tried several ways to code that supports IE - no success. See screenshot below to see the issues I'm showing.</p>
  
  <p><code>position: relative;</code> and <code>position: absolute;</code> in the parent in css didnt work.</p>
  
  <p>First several lines shows -  </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=11"&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="notice-wrapper"&gt;
          &lt;div class="notice-overlay"&gt;
              &lt;div class="notices"&gt;
                  &lt;div class="box-left"&gt;
                      &lt;img src="imgs/check.png" alt="Everything is Good! - Sorenson VRS"&gt;
                      &lt;p class="good"&gt;EVERYTHING IS GOOD!&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="box-right"&gt;&lt;h1&gt;Service Outage&lt;/h1&gt;&lt;p&gt;Sorenson is not experiencing any service outage at this time. If  you are experience problems connecting to VRS, please restart the Sorenson endpoint (VP, PC, or Mobile device). if you continue to have problems, please contact Tech Support below.&lt;/p&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="service-wrapper"&gt;
          &lt;div class="services"&gt;
              &lt;a href=""&gt;&lt;div class="button"&gt;&lt;img src="imgs/icon-techsup.png" class="iconBtn"&gt; TECHNICAL SUPPORT&lt;/div&gt;&lt;/a&gt;
              &lt;div class="text"&gt;&lt;p&gt;For technical issues with placing or receiving videophone calls.&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="services"&gt;
              &lt;a href=""&gt;&lt;div class="button"&gt;&lt;img src="imgs/icon-custserv.png" class="iconBtn"&gt; CUSTOMER SERVICES&lt;/div&gt;&lt;/a&gt;
              &lt;div class="text2"&gt;&lt;p&gt;For questions about applying for ntouch®, porting, moving, updating your address, or other general questions.&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="video-wrapper"&gt;
          &lt;div class="title-video"&gt;&lt;h2&gt;(title here)&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="video"&gt;&lt;img src="imgs/video-placeholder.png" alt="video"&gt;&lt;/div&gt;
          &lt;div class="bg-orange"&gt;&lt;/div&gt;
          &lt;div class="bg-white-watermark"&gt;&lt;/div&gt;
          &lt;div class="bg-white"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS with the Everything is Good boxes -  </p>
  
  <pre><code>.notice-wrapper {  
  height: 400px;    
  width: 100%;     
  }
  .notice-overlay {
  display: block;
  width: 100%;
  height: 400px;
  position: relative;
  background: rgba(0,0,0,0.8);
  left: 0;
  z-index: 9999;
  color: #fff;
  overflow: hidden;
  text-align: center;
  }
  .notices {
  display: flex;
  width: 809.25px;
  height: 288.25px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  transform: translateY(60px)
  -ms-transform: translateY(60px);
  -webkit-transform: translateY(60px);
  }
  .box-left {
  flex: 1;
  background: #41ad49;
  height: 100%;
  padding-top: 35px;
  }
  .box-right {
  width: 450px;
  background: #40403f;
  padding: 25px;
  text-align: left;
  }
  </code></pre>
  
  <p>CSS for the two buttons and the texts - </p>
  
  <pre><code>.service-wrapper {
  width: 100%;
  height: 175px;
  background-color: #000000;
  }
  .services {
  width: 55%;
  display: flex;
  margin: 0 auto;
  transform: translateY(15px)
  -ms-transform: translateY(25px);
  -webkit-transform: translateY(15px);
  
  }
  .text p {
  flex: 1 1 auto;
  line-height: 25px;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
  align-items: center;
  transform: translateY(6px)
  -ms-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  }
  .text2 p {
  flex: 1 1 auto;
  line-height: 25px;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
  align-items: center;
  transform: translateY(6px)
  -ms-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  }
  .button {
  flex: 0 0 auto; 
  height: 40px;
  width: 225px;
  margin: 10px;
  padding: 5px;
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 5px;
  background: #ffbb11; 
  text-align: center;
  color: #000000;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-around;
  }
  .iconBtn{
  max-height: 75%;
  max-width: 75%;
  }
  </code></pre>
  
  <p>CSS on title and the image - </p>
  
  <pre><code>.title-video h2 {
  width: 100%;
  position: absolute;
  margin: auto 0;
  text-align: center;
  margin-top: 50px;
  transform: translateX(-285px)
  -ms-transform: translateX(-285px);
  -webkit-transform: translateX(-285px);
  }
  .video-wrapper {
  width: 100%;
  margin: auto 0;
  text-align: center;
  }
  .video {
  position: absolute;
  margin: auto 0;
  text-align: center;
  width: 100%;
  
  }
  .video img {
  max-height: 75%;
  max-width: 75%;
  width: 700px;
  height: 393px;
  margin-top: 90px;
  }  
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/bj51z.jpg" alt="a busy cat"></p>