div绝对定位不适用于不同的窗口大小或分辨率

时间：2014-02-19 17:01:35

标签： html css

请参考以下小提琴

http://fiddle.jshell.net/LHZDh/2/

代码：

<body>

    <div style="position: relative; left: -5px; top: 18px;"><img id="ImgTachoMetre" src="/Images/u174_normal.png"/></div>


<div class="report_area" style="width: 1011px;">





<table class="NNACorporateSectiontop">
    <tbody><tr>

        <td>
            <div class="ActionItems_wrapper row0 box bordered span4 dbBG">
                <span class="title" style="background-color: #C71444; background-image:none; color:White;"><strong>Action Items</strong></span>
                <div class="component-body">



    <div class="HotAlertRoot">


        <table class="HotAlerts" align="center">
            <tbody><tr>
                <td>Total Open
                </td>
                <td>


                    <a class="redirectLink" href="/?Length=0">177</a>
                </td>

            </tr>
            <tr>
                <td>
                    Recent: 0 - 3 Days
                </td>
                <td class="NNABoldText">
                    0
                </td>
            </tr>
            <tr>
                <td>
                    Serious: 4 - 7 Days
                </td>
                <td class="NNABoldText">
                    0
                </td>
            </tr>
            <tr>
                <td>
                    Critical: &gt; 7 Days
                </td>
                <td class="NNABoldText">
                    177
                </td>
            </tr>

        </tbody></table>

        <table class="HotAlertsDept">
            <tbody><tr>
                <td></td>
                <td>
                    Sales
                </td>
                <td>
                    Service
                </td>
            </tr>
            <tr>

                <td>Total Open 

                </td>
                <td>



                    <a href="/">65</a>
                </td>
                <td>

                    <a href="/">112</a>
                </td>
            </tr>
        </tbody></table>

        <div class="GreyArea"></div>


        <div class="CorpPerformance Alert">
            <div class="row">
                <div class="CvalPending">
                    Pending


                    <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

                </div>
                <div>
                    &lt;5 Days to Edit Email

                </div>
                <div>
                    <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

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

        <table class="HotAlertsDept">
            <tbody><tr>
                <td></td>
                <td>
                    Sales
                </td>
                <td>
                    Service
                </td>
            </tr>

            <tr>

                <td>Total

                </td>
                <td>
                    <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

                </td>
                <td>

                    <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Service" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

                </td>
            </tr>
        </tbody></table>

    </div>

                </div>
            </div>
        </td>


    </tr>
</tbody></table>

</div>
    </body>

我需要将图标放在actionitems部分的顶角。请参考下面的预期图片。

enter image description here

但在某些分辨率或窗口大小更改中它不对齐。

错位截图：

enter image description here

我该如何解决这个问题？

3 个答案:

答案 0 :(得分：0)

使用“margin”代替“left”和“top”。

http://fiddle.jshell.net/LHZDh/2/

代码：

<body>

    <div style="position: relative; margin: 18px 0 0 -5px; ">
        <img id="ImgTachoMetre" src="/Images/u174_normal.png"/>
    </div>


    <div class="report_area" style="width: 1011px;">





        <table class="NNACorporateSectiontop">
            <tbody>
                <tr>

                    <td>
                        <div class="ActionItems_wrapper row0 box bordered span4 dbBG">
                            <span class="title" style="background-color: #C71444; background-image:none; color:White;">
                                <strong>Action Items</strong>
                            </span>
                            <div class="component-body">



                                <div class="HotAlertRoot">


                                    <table class="HotAlerts" align="center">
                                        <tbody>
                                            <tr>
                                                <td>Total Open
                                                </td>
                                                <td>


                                                    <a class="redirectLink" href="/?Length=0">177</a>
                                                </td>

                                            </tr>
                                            <tr>
                                                <td>
                    Recent: 0 - 3 Days
                                                </td>
                                                <td class="NNABoldText">
                    0
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                    Serious: 4 - 7 Days
                                                </td>
                                                <td class="NNABoldText">
                    0
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                    Critical: &gt; 7 Days
                                                </td>
                                                <td class="NNABoldText">
                    177
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>

                                    <table class="HotAlertsDept">
                                        <tbody>
                                            <tr>
                                                <td/>
                                                <td>
                    Sales
                                                </td>
                                                <td>
                    Service
                                                </td>
                                            </tr>
                                            <tr>

                                                <td>Total Open 

                                                </td>
                                                <td>



                                                    <a href="/">65</a>
                                                </td>
                                                <td>

                                                    <a href="/">112</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <div class="GreyArea"/>


                                    <div class="CorpPerformance Alert">
                                        <div class="row">
                                            <div class="CvalPending">
                    Pending


                                                <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

                                            </div>
                                            <div>
                    &lt;5 Days to Edit Email

                                            </div>
                                            <div>
                                                <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

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

                                    <table class="HotAlertsDept">
                                        <tbody>
                                            <tr>
                                                <td/>
                                                <td>
                    Sales
                                                </td>
                                                <td>
                    Service
                                                </td>
                                            </tr>

                                            <tr>

                                                <td>Total

                                                </td>
                                                <td>
                                                    <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

                                                </td>
                                                <td>

                                                    <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Service" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a>

                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                        </div>
                    </td>


                </tr>
            </tbody>
        </table>

    </div>
</body>

如果您不想影响“行动项目”的位置，请使用“position：absolute”作为parrent div。

答案 1 :(得分：0)

像这样添加两个<div>，然后删除此/>：

<body>
<div>
    <div style="position: relative; left: -5px; top: 18px;"><img id="ImgTachoMetre" src="/Images/u174_normal.png"></div>


<div class="report_area" style="width: 1011px;">

</div>

答案 2 :(得分：0)

如果您想将#ImgTachoMetre相对于.ActionItems_wrapper定位，那么您可能应该将其置于其中，或者至少在它之前或之后，以便它们具有相同的父级，并且它们都可以相对定位相同的元素。 试试两者，看看最适合你的是什么。这当然不是一个规则，但这是一个很好的做法。

相关问题
最新问题