title: Position relative to screen size
body: <p>before I start to explain my problem, I just wan't to say that even if this subject already exist I haven't found any solution working, it has been 1 week that this problem is now blocking, I really need help. So the problem is that I started to create a website and I tried it on different screen resolution, but it only work on mine, on different the elements are going crazy and do strange things, each go on the other etc...
  Here's my code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
      font-family: Comfortaa;
      src: url(Comfortaa-Regular.ttf);
  }
  @font-face
  {
   font-family: Comfort;
   src: url(ChampEtLimou.ttf);
  }
  body
  {
   background-color : rgb(255,255,255);
  }
  .titre3
  {
   color : #0183c0;
   font-family : Comfortaa;
   position:  fixed;
   font-size :50px;
   z-index:10; 
   left : 43.2%;
   top:-6%;
  
  }
  .titre1
  {
   color : #6597ed;
   font-family : Comfortaa;
   position:  fixed;
   left : 43.2%;
   top:3%;
   font-size : 30px;
   z-index:10;
  }
  .bacc
  {
   font-family : Comfortaa;
   position : fixed;
   left : 45%;
   top : 12%;
   color:#ffffff;
   -moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
   -webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
   box-shadow:inset 0px 1px 0px 0px #7a8eb9;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #196499), color-stop(1, #1a6ba1));
   background:-moz-linear-gradient(top, #196499 5%, #1a6ba1 100%);
   background:-webkit-linear-gradient(top, #196499 5%, #1a6ba1 100%);
   background:-o-linear-gradient(top, #196499 5%, #1a6ba1 100%);
   background:-ms-linear-gradient(top, #196499 5%, #1a6ba1 100%);
   background:linear-gradient(to bottom, #196499 5%, #1a6ba1 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#196499', endColorstr='#1a6ba1',GradientType=0);
   background-color:#196499;
   border:1px solid #314179;
   display:inline-block;
   cursor:pointer;
   font-size:10px;
   font-weight:bold;
   padding:11px 23px;
   z-index:10;
  }
  .bacc:hover
  {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1a6ba1), color-stop(1, #196499));
   background:-moz-linear-gradient(top, #1a6ba1 5%, #196499 100%);
   background:-webkit-linear-gradient(top, #1a6ba1 5%, #196499 100%);
   background:-o-linear-gradient(top, #1a6ba1 5%, #196499 100%);
   background:-ms-linear-gradient(top, #1a6ba1 5%, #196499 100%);
   background:linear-gradient(to bottom, #1a6ba1 5%, #196499 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a6ba1', endColorstr='#196499',GradientType=0);
   background-color:#1a6ba1;
  }
  .bacc:active
  {
  
  }
  .ball 
  {
   position: fixed;
      width : 2.7%;
   height:5%;
   left:40%;
   top:2%;
   z-index:10;
  }
  .immenu
  {
   position:relative;
   top:15em;
   left:3em;
   width:30%;
   height:30%;
   z-index:2;
   padding: 8px 10px;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: inset rgba(0,0,0,0.35) 3px 3px 13px;
      -webkit-transition: all 0.7s;
      -moz-transition: all 0.7s;
      transition: all 0.7s;
  }
  .safalogo
  {
   position:fixed;
   top:5%;
   left:5%;
   width:6%;
   height:5%;
   z-index:10;
  }
  .sanologo
  {
   position:fixed;
   top:5%;
   left:12%;
   width:6%;
   height:8%;
   z-index:10;
  }
  .banner
  {
   position:relative;
   top:-7em;
   left:-5em;
   width:100em;
   height:25em;
   z-index:0;
  }
  .voile
  {
   position:relative;
   top:-32.2em;
   left:-1em;
   width:100em;
   height:25em;
   z-index:1;
   opacity:0.5;
  }
  .speechtitre
  {
   color : white;
   font-family : Comfort;
   position:  relative;
   margin-left:0;
   margin-top:0;
   left : -1.7em;
   top:-30em;
   font-size : 30px;
   z-index:1;
   font-weight:bold;
  }
  .speechtex
  {
   color : white;
   font-family : Comfort;
   position:  relative;
   left : 29em;
   top:-45em;
   font-size : 20px;
   z-index:1;
  }
  .ligne
  {
   position:fixed;
   width:100%;
   height:0.2%;
   top:20%;
   left:0%;
   z-index:10;
  }
  .faceblogo
  {
   position:fixed;
   width:3.8%;
   height:6%;
   left:90%;
   top:6%;
   z-index:10;
  }
  .bfixe
  {
   position:fixed;
   width:100%;
   height:20%;
   top:0%;
   left:0%;
   z-index:9;
   opacity:0.75;
  }
  body
  {
   overflow-x: hidden;
   padding:auto;
   border:auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Kibera Black Stars&lt;/title&gt;
    &lt;meta name="description" content="The HTML5 Herald"&gt;
    &lt;meta name="author" content="SitePoint"&gt;
    &lt;link rel="stylesheet" href="Style.css"&gt;
    &lt;style type="text/css"&gt;a:link{text-decoration:none}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;p class="titre3"&gt;Kibera&lt;/p&gt;
   &lt;P  class="titre1"&gt;BlackStars&lt;/P&gt;
   &lt;img src="images/ball.png" alt="ballon" class="ball"&gt;
   &lt;a href="Site.html" class="bacc"&gt;Accueil&lt;/a&gt;
   &lt;img src="images/safalogo.png" alt="safalogo" class="safalogo"&gt;
   &lt;img src="images/sanologo.png" alt="sanologo" class="sanologo"&gt;
   &lt;img src="images/ligne.jpg" alt="ligne" class="ligne"&gt;
   &lt;img src="images/bannierfixe.jpg" alt="bannierfixe" class="bfixe"&gt;
   &lt;p&gt;&lt;a href="https://www.facebook.com/BLACKSTARSKIBERA" target="_blank"&gt;&lt;img src="images/faceblogo.png" alt="faceblogo" class="faceblogo"&gt;&lt;/a&gt;&lt;/p&gt;
   &lt;img src="images/immenu.jpg" alt="immenu" class="immenu"&gt;
   &lt;img src="images/banner.jpg" alt="banner" class="banner"&gt;
   &lt;img src="images/voile.jpg" alt="voile" class="voile"&gt;
   &lt;p align="center" class="speechtitre"&gt;Faut mettre un titre la !&lt;/p&gt;
   &lt;p class="speechtex"&gt;Faut mettre un texte ici !&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for help !</p>