How to prevent the UI elements overlapping from each other when the browser is resized?
<p>I've spent the last week learning how to design a UI through HTML. I basically thought I had everything perfect with my website layout and was ready to demo.But I accidentally resized my web browser and observed that all the elements are getting overlapped each other(even in other machines the same behaviour). </p>

<p>I have googled this issue but none is helpful.Basically, am not sure where to modify the code.Please let me know how can I resolve this issue.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!Document html&gt;
&lt;html lang="en"&gt;
&lt;base href="file:///C:/Users/myuser/Pictures/HTML/"&gt;
&lt;head&gt;
    &lt;title&gt;This is title&lt;/title&gt;
&lt;/head&gt;
&lt;style&gt;
    body {
        background-color:#FDF5E6;
        background-image: url("file:///C:/Users/myuser/Pictures/HTML/bicycles.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;h1 align="center" style="font-family: Colonna MT;font-size:50px;color:brown;position:absolute;top: 3%; left: 41%;"&gt;This is website heading&lt;/h1&gt;
    &lt;p style="color:DarkSalmon;position:absolute;top: 10%; left: 48%;"&gt;&lt;i&gt;"This is caption"&lt;/i&gt;
    &lt;/div&gt;
    &lt;h2 style="color:skyblue; position:absolute;top: 20%; left: 39%;"&gt;Login&lt;/h2&gt;
    &lt;div style="color:Teal;position:absolute;top: 26%; left: 39%; width:300px;height:125px;border:1px solid #000;"&gt;&lt;/div&gt;
    &lt;form name="login" style="color:SandyBrown;font-size:larger;position:absolute;top: 27%; left: 40%;"&gt;
            Username : &lt;input type="text" name="userid"/&gt;&lt;br&gt;&lt;/br&gt;
            Password : &lt;input type="password" name="pswrd"/&gt;&lt;br&gt;&lt;/br&gt;
            &lt;input class="btn btn-primary" style="font-size:medium;background-color: #FFFF00; position:absolute;top: 95%; left: 50%;" type="button" onclick="check(this.form)" value="Login"/&gt;
        &lt;input style="font-size:medium;background-color: #FFFF00; position:absolute;top: 95%; left: 75%;" type="reset" value="Cancel"/&gt;
    &lt;/form&gt;
    &lt;a style="color:MediumVioletRed;position:absolute;bottom: 58%; left: 50.5%;" href="Forgot Password"&gt;Forgot Password&lt;/a&gt;
    &lt;p style="color:YellowGreen;font-size:20px;position:absolute;bottom: 53%; left: 39%;"&gt;Don't have an account?&lt;/p&gt;
    &lt;a style="color:Purple ;font-size:20px;position:absolute;bottom: 55%; left: 50.5%;" href="Signup.html" onClick="return popup(this, 'Signup')"&gt;Sign up&lt;/a&gt;
    &lt;p style="font-size:20px;position:absolute;bottom: 53%; left: 54.5%;"&gt;here&lt;/p&gt;

    &lt;SCRIPT TYPE="text/javascript"&gt; 
         function popup (mylink, windowname) { 
            if (! window.focus)
                return true; 
            var href; 
            if (typeof(mylink) == 'string') 
                href=mylink; 
            else 
                href=mylink.href; 
            window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
            return false; 
        } 
    &lt;/SCRIPT&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>