0

在 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中找到截图

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

4

1 回答 1

0

因为我不是会员，所以看不到图片，抱歉。但是我已经在 jsFiddle 中重新创建了问题position:absolute;，并且，如果我从中删除.divOverlayVisible它似乎可以正常工作：示例

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

编辑：如果您需要该职位来z_index工作，您可以将值更改absolute为relative而不是删除它。

于 2013-04-24T08:48:52.603 回答