keep elements in the same position when the browser is resized - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

keep elements in the same position when the browser is resized

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html {<!--   w ww. j av  a2  s . c  o m-->
   overflow-x:hidden;
}

body {
   margin:0;
   padding:0;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') top no-repeat;
   min-height:861px;
   height:861px;
}

h1 {
   margin:0;
   padding:0;
   position:absolute;
   color:Chartreuse;
   visibility:hidden;
}

#container {
   margin:0 auto;
   padding:0;
   position:relative;
   height:861px;
}

#myid {
   position:absolute;
   left:51%;
   right:51%;
   margin-left:-1281px;
   margin-right:-1281px;
   z-index:1005;
}

#fast-back {
   position:relative;
   margin-left:16%;
   top:273px;
   z-index:100000;
   text-align:center;
   width:127px;
}
</style> 
 </head> 
 <body> 
  <h1>Lorem ips</h1> 
  <img id="myid" src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
  <div id="container"> 
   <div id="fast-back"> 
    <p class="big-font">Lorem ips</p> 
    <p class="small-font">Lorem ipsum do</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials