html - 在td内部叠加将表格单元向外推

在TD中使用叠加层时，我遇到布局问题。让我展示我的HTML。

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="theme.css">
    <script type="text/javascript" src="jquery-1.7.1.js">
    </script>
    <script type="text/javascript">
        function alterControl() {
            var $visibleCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayVisible");
            var $hiddenCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayHidden");
            $visibleCtrl.removeClass("divOverlayVisible").addClass("divOverlayHidden");
            $hiddenCtrl.removeClass("divOverlayHidden").addClass("divOverlayVisible");
        }
    </script>
</head>
<body>
    <table id="servicesTable">
        <thead>
            <tr>
                <th>
                    <label id="lblServiceName">
                        Name</label>
                </th>
                <th>
                    <label id="lblResult">
                        Result</label>
                </th>
            </tr>
        </thead>
        <tr id="ID1">
            <td>
                <input style="width: 100px;" id="txtName1" name="txtName1" type="text" value="Service1" />
            </td>
            <td>
                <div class="overlayOuter">
                    <div id="ServiceTestResult1" class="divOverlayVisible">
                        <input type="text" value="This is static text" id="Testresult1" style="width: 40px;
                            height: 16px;" />
                    </div>
                    <div id="ServiceTestResultTestImage1" class="divOverlayHidden">
                        <img src="Validated_16.png" alt="Image not found" style="width: 16px; height: 16px;" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <input type="button" id="btnToggle" value="Alter" onclick="alterControl()" />
</body>
</html>

我的CSS如下所示

.overlayOuter
{
    position:relative;
    height:100%;
    width:100%;
}

.divOverlayHidden
{
    top:0px;
    left:0px;
    position:absolute;
    visibility:hidden;
    z-index:101;
}

.divOverlayVisible
{
    top:0px;
    left:0px;
    position:absolute;
    visibility:visible;
    z-index:100;
}

我面临的问题是，第二列中的表格单元格已超出该行。我的想法是根据输入一次显示文本框或图像。也请找到在skydrive中上传的屏幕截图
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!130
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!131

谁能告诉我如何解决这个问题？

最佳答案

很抱歉，我不是会员，所以看不到图片。但是我在jsFiddle中有recreate the problem，并且，如果我从position:absolute;中删除.divOverlayVisible，它似乎可以正常工作：Example

.divOverlayVisible {
    top:0px;
    left:0px;
    /*position:absolute; I have removed this line */
    visibility:visible;
    z-index:100;
}

编辑：如果您需要使z_index工作的位置，您可以将值absolute更改为relative而不是将其删除。