Question

我是css的垃圾。

我开始构建一个主体设置为absolute的页面，并围绕此构建所有元素。当浏览器缩放改变时，定位变为＆amp;看起来没什么问题（只有正确的@ 100％）。
我将主体更改为relative并重新构造，因此构建页面的主要div正在运行。
然而，似乎我真的很喜欢这个。当将身体更新为relative时，几乎所有的元素都会隐藏起来，即使我理解绝对的＆amp;相对于一起工作（父母/孩子）。

截图：
（应该看起来像这样（所有位置绝对）） enter image description here

enter image description here

（我正试图解决的问题。放大/缩小会导致标签向上/向下移动（上方和下方））

enter image description here

（这是我将身体设置为相对的，是的，这是整个页面拍摄。（下））

的CSS：

        body{
                position: relative; 
                margin: 0;
                width: 100%;
                height: 100%;
                //font-family: Arial;
                zoom: 100%;
            }

        #invoiceOptions{
            position: absolute;
            background-color: #f9dede;
            top: 11.9%;
            left: 10%;
            width: 80%;
            height: 33.5%;
            border-radius: 10px;
            font-size: 15pt;
        }

        #referals{
            position: absolute;
            //background-color: #C93939;
            top: 11.9%; //11
            left: 10%;
            width: 80%;
            height: 33.5%;
            font-size: 15pt;
            border-radius: 1%;
        }

        #orders{
            position: absolute;
            //background-color: #C93939;
            //background-image: url('background.png');
            background-repeat: no-repeat;
            top:11.9%;
            left:10%;
            width: 80%;
            height: 75%;
            border-radius: 1%;
            font-size: 15pt;

            overflow: scroll;
            overflow-x: hidden;
            overflow-y: hidden;

        }
        #orders:hover{
            overflow-y: visible;


        }
        #toolbar{
           position: absolute;

            background-color: white;
            width: 80%;
            left: 8%;
            height: 20%;
            border-radius: 5px;

        }
        #border1{
             position: absolute;
             width: 10%;
             height: 100%;
             background-color: black;
             //same for border2, but on right.
       }
        .tab-links{
            position: absolute;
            width: 40%;
            top: 28.5%;
            left: 3%;
            background: no-repeat;
            border-radius: 20px 20px 0px 0px;
            background-color: #dbdbdb;
            box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
        }

的HTML。的

<body>
            <div id="toolbar">
                <div style="">

                    <h4 style="position: absolute; top: 5%; left: 15%;">Welcome <?php echo $User[0]; ?>!</h4>

                        <ul class="tab-links">
                            <li class="active"><a href="#tab1">Orders <div id='orderCount' style='display: inline;'></div></a></li>
                            <li><a href="#tab2">Referrals <div id='referralCount' style='display: inline;'></div></a></li>
                            <li><a href="#tab3">Options</a></li>
                        </ul>


                    <div style="">
                    <a href="https://XXXXXXXX.com/mysagepay/" target="_blank">
                        <IMG style="position: absolute; border-radius: 5%; left: 60%;" border=0 alt=SagePay src="https://live.sagepay.com/mysagepay/images/sagepay_logo.png" width=136 height=50>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <A href="https://www.businessexpress-uk.com/" target="_blank">
                        <IMG style="position: absolute; border-radius: 5%; left: 70%;" border=0 alt=SagePay src="https://XXXX.com/Content/images/logo.png" width=140 height=50>
                    </A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <A href="http://XXXXX.co.uk/support/staff/" target="_blank">
                        <IMG style="position: absolute; border-radius: 5%; left: 80%;" border=0 alt=Fusion src="http://XXXXX.co.uk/support/__swift/themes/__cp/images/fusion.gif" width=200 height=50>
                    </A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>

                </div>
            </div>

            <div class="tab-content">
                <div id="tab1" class="tab active">
                    <div id="orders">

                        <div class="CSSTableGenerator">
                            <table width="100%" class='table'>
                                <thead>
                                    <tr>
                                        <td><b>Customer</b></td>
                                        <td><b>Company</b></td>
                                        <td>User ID</td>
                                        <td><b>Time</b>
                                    </tr>
                                </thead>
                                <tbody id="orderBody">

                                </tbody>
                            </table>
                            <div id="orderHolder"></div>
                        </div>
                    </div>
                    <div id="print">
                        <a href="PrintAllWelcomeLetters.php"><img src="print.png" title="Print All Invoices"/></a>
                    </div>
                </div>

                <div id="tab2" class="tab">

                    <div id="referals">

                        <div class="CSSTableGenerator">
                            <table width='100%' class='table'>
                                <thead>
                                    <tr>
                                        <td><b>Account</b></td>
                                        <td><b>Customer</b></td>
                                        <td><b>Referral ID</b></td>
                                        <td><b>UUID</b></td>
                                        <td><b>Time</b></td>
                                    </tr>
                                </thead>

                                <tbody id="tbody">
                                </tbody>

                            </table> 

                            <div id="hold"></div>
                        </div>
                    </div>
                </div>

                <div id="tab3" class="tab">
                    <div id="invoiceOptions">

                        <div id="DisplayOptions">
                            <fieldset style="width: 100%;">

                            </fieldset>
                        </div>
                    </div>

                </div>
            </div>  

        <div id='border1'></div>
        <div id='border2'></div>
    </body>

的注记。

我正在使用ajax来填充web-gen表。我暂时排除了表格css，但是如果需要则评论＆amp;我会包括

更新。的
我已将tab-links纳入css。这是标签按钮（灰色）持有者的CSS。标签按钮本身向左浮动。

表格内容，是一个无样式的div，包含3个标签选项内容（推荐，订单和选项）。

CSS定位错误，相对于绝对

0 个答案: