当浏览器重新调整时，网站元素会混淆

Question

我写了一个基于旅行的启动网站。这是一个静态网站，而不是一个响应式网站。代码为here Code:

<div id="mainDiv" class="container">
        <div id="header">
            <div class="plc">
                <h1><a href="#"></a></h1>
                <nav>
                    <div id="navPos">
                        <div style="position: relative;right: 113px;">Register</div>
                        <div style="position: absolute;right: 255px;top: 37px;">Login</div>
                        <div style="position: absolute;top: 38px;right: 123px;">Market</div>    
                    </div>
                </nav>
            </div>
        </div>
        <div id="body" class="container-fluid">
            <div id="container">
                <div id="overlay"></div>
                <div id="menu"></div>
                <div id="info">Fill your information here</div>
                <div id="formPos"></div>
                <div id="or">OR</div>
                <div id="fbReg">
                    <img src="images/fbOne.png" id="fbIcon">
                    <div id="fbPos">Register with Facebook</div>
                </div>
                <div id="gReg">
                    <img src="images/gPlus.jpg" id="gIcon">
                    <div id="gPos">Register with Google</div>
                </div>
                <div id="cliPos">
                    <img src="images/Bistip-in-media.png" id="imgCli">
                </div>
            </div>
        </div>
        <div id="footer">
            <div id="aboutUs">
                About Us
            </div>
            <div id="aboutList">
                <ul>
                    <li>About us</li>
                    <li>Media reviews</li>
                    <li>Bistip guide</li>
                </ul>
            </div>
            <div id="accountInformation">
                Account Information 
            </div>
            <div id="accountList">
                <ul>
                    <li>How to login</li>
                    <li>Create an account</li>
                    <li>Logout</li>
                    <li>Join us</li>
                </ul>
            </div>
            <div id="marketInformation">
                Market Information  
            </div>
            <div id="marketList">
                <ul>
                    <li>Shop</li>
                    <li>Shipping</li>
                    <li>My connection</li>
                </ul>
            </div>
        </div>
    </div>  

全屏浏览器中的网站如下所示：

浏览器的大小如下：

你可以看到元素混淆了。我怎样才能解决这个问题？

Answer 1

这是因为你在某些元素中使用了绝对位置。 您可以尝试使用bootstrap.css并取消您正在使用的所有位置。