title: Web Page does not render well on SharePoint online correctly but does on standard servers
body: <p>The code below works in a local folder and on a standard server, but when deployed onto SharePoint  the image within the div titled 'image-link' becomes cut off. Can someone help get this to render correctly on SharePoint?</p>
  <p>I believe the issue is due to absolute positioning but I can't get this to render correctly with relative or fixed positioning.</p>
  <pre><code>    
  
      &lt;html&gt; 
      &lt;head&gt; 
      
      &lt;meta charset=&quot;UTF-8&quot;&gt; 
      
      
      
      &lt;link rel=&quot;icon&quot; href=&quot;images/favicon.ico&quot;/&gt; 
  
      &lt;title&gt;&lt;/title&gt; 
      
      
      
      &lt;style&gt; 
      
      
      
      
      
      #page-wrap { 
      position: relative; 
      width: 1400px; 
      margin: 120px auto; 
      } 
      
      } 
      
      
      
      a { text-decoration: none; } 
      
      .image-link { 
      width: 1400px; 
      height: 840px; 
      position: absolute; top: 0; left: 0; } 
      
      #one { background: url(images/image1.jpg) no-repeat; z-index: 2; 
      object-position: 0% 0%; 
      } 
      
      
      #two { background: url(images/comingsoon.jpg) no-repeat; 
      
      
      } 
      
      
      
      #three { background: url(images/comingsoon2.jpg) no-repeat; 
      
      } 
      
      
      
      #four { background: url(images/comingsoon3.jpg) no-repeat; 
      
      } 
      
      
      #one span { 
      color: white; 
      position: relative; 
      right: 40%; 
      bottom: 8%; } 
      
      
      #two span { 
      
      color: white; 
      position: relative; 
      right: 20%; 
      bottom: 8%; } 
      
      
      #three span { 
      color: white; 
      position: relative; 
      right:0%; 
      bottom: 8%; } 
      
      
      #four span { 
      
      color: white; 
      position: relative; 
      right: -20%; 
      bottom: 8%; } 
      
      
      .image-link span { 
      border-radius: 12px; 
      width: 230px; 
      padding: 8px; 
      background: #4d217a; 
      border: 1px solid #ccc; 
      } 
      
      
      .image-link:hover { 
      z-index: 100; 
      } 
      
      .image-link:hover span { 
      color: #1b1734 !important; 
      background: #E4E9FF; 
      color:#1b1734; 
      } 
      
      
      
      &lt;/style&gt; 
      
      
      
      &lt;/head&gt; 
      
      
      
      
      
      
      &lt;body&gt; 
      &lt;div class=&quot;page&quot;&gt; 
      
      &lt;div class=&quot;header&quot;&gt; 
      
      
      
      
      
      
      
      
      &lt;div class=&quot;wrapper&quot;&gt; 
      
      
      
      &lt;div class=&quot;content-one-left&quot;&gt; 
      
      
      
      &lt;div id=&quot;page-wrap&quot;&gt; 
      
      
      
      &lt;div id=&quot;switcher-wrap&quot;&gt; 
      &lt;a id=&quot;one&quot; class=&quot;image-link&quot; href=&quot;image1.aspx&quot; target=&quot;_blank&quot; &gt;&lt;span&gt;Most recent release: xxxx&lt;/span&gt;&lt;/a&gt; 
      &lt;a id=&quot;two&quot; class=&quot;image-link&quot; href=&quot;#&quot;&gt;&lt;span&gt;Released 04 Sep 2021: xxxx&lt;/span&gt;&lt;/a&gt; 
  
      &lt;a id=&quot;three&quot; class=&quot;image-link&quot; href=&quot;#&quot;&gt;&lt;span&gt;Released 09 August 2021: xxxx&lt;/span&gt;&lt;/a&gt; 
  
      &lt;a id=&quot;four&quot; class=&quot;image-link&quot; href=&quot;#&quot;&gt;&lt;span&gt;Released 04 Feb 2021: xxxx&lt;/span&gt;&lt;/a&gt; 
  
      &lt;/div&gt; 
      
      &lt;/div&gt; 
      
      
      &lt;/div&gt; 
  
      
      
      &lt;/div&gt; 
      
      
      
      
      
      
      &lt;/body&gt; 
      &lt;/html&gt;
   
  
  
      
      &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; 
      http://www.w3.org/TR/html4/strict.dtd&gt; 
      
      &lt;html&gt; 
      &lt;head&gt; 
      
      &lt;meta charset=&quot;UTF-8&quot;&gt; 
      
      
      
      &lt;link rel=&quot;icon&quot; href=&quot;images/favicon.ico&quot;/&gt; 
      
      &lt;title&gt;&lt;/title&gt; 
      
      
      
      &lt;style&gt; 
      
      
      
      
      
      #page-wrap { 
      position: relative; 
      width: 1400px; 
      margin: 120px auto; 
      } 
      
      } 
      
      
      
      a { text-decoration: none; } 
      
      .image-link { 
      width: 1400px; 
      height: 840px; 
      position: absolute; top: 0; left: 0; } 
      
      #one { background: url(images/PAB-03-0008-03.jpg) no-repeat; z-index: 2; 
      object-position: 0% 0%; 
      } 
      
      
      #two { background: url(images/comingsoon.jpg) no-repeat; 
      
      
      } 
      
      
      
      #three { background: url(images/comingsoon2.jpg) no-repeat; 
      
      } 
      
      
      
      #four { background: url(images/comingsoon3.jpg) no-repeat; 
      
      } 
      
      
      #one span { 
      color: white; 
      position: relative; 
      right: 40%; 
      bottom: 8%; } 
      
      
      #two span { 
      
      color: white; 
      position: relative; 
      right: 20%; 
      bottom: 8%; } 
      
      
      #three span { 
      color: white; 
      position: relative; 
      right:0%; 
      bottom: 8%; } 
      
      
      #four span { 
      
      color: white; 
      position: relative; 
      right: -20%; 
      bottom: 8%; } 
      
      
      .image-link span { 
      border-radius: 12px; 
      width: 230px; 
      padding: 8px; 
      background: #4d217a; 
      border: 1px solid #ccc; 
      } 
      
      
      .image-link:hover { 
      z-index: 100; 
      } 
      
      .image-link:hover span { 
      color: #1b1734 !important; 
      background: #E4E9FF; 
      color:#1b1734; 
      } 
      
      
      
      &lt;/style&gt; 
      
      
      
      &lt;/head&gt; 
      
      
      
      
      
      
      &lt;body&gt; 
      &lt;div class=&quot;page&quot;&gt; 
      
      &lt;div class=&quot;header&quot;&gt; 
      
      
      
      
      
      
      
      
      &lt;div class=&quot;wrapper&quot;&gt; 
      
      
      
      &lt;div class=&quot;content-one-left&quot;&gt; 
      
      
      
      &lt;div id=&quot;page-wrap&quot;&gt; 
      
      
      
      &lt;div id=&quot;switcher-wrap&quot;&gt; 
      &lt;a id=&quot;one&quot; class=&quot;image-link&quot; href=&quot;A65-PAB-03-0008-04.aspx&quot; target=&quot;_blank&quot; &gt;&lt;span&gt;Most recent release: xxxx&lt;/span&gt;&lt;/a&gt; 
      &lt;a id=&quot;two&quot; class=&quot;image-link&quot; href=&quot;#&quot;&gt;&lt;span&gt;Released 04 Sep 2021: xxxx&lt;/span&gt;&lt;/a&gt; 
      
      &lt;a id=&quot;three&quot; class=&quot;image-link&quot; href=&quot;#&quot;&gt;&lt;span&gt;Released 09 August 2021: xxxx&lt;/span&gt;&lt;/a&gt; 
      
      &lt;a id=&quot;four&quot; class=&quot;image-link&quot; href=&quot;#&quot;&gt;&lt;span&gt;Released 04 Feb 2021: xxxx&lt;/span&gt;&lt;/a&gt; 
      
      &lt;/div&gt; 
      
      &lt;/div&gt; 
      
      
      &lt;/div&gt; 
      
      
      
      &lt;/div&gt; 
      
      
      
      
      
      
      &lt;/body&gt; 
      &lt;/html&gt;
  
  </code></pre>