Question

在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

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

Answer 1

我看不到图像，因为我不是会员，对不起。但我在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而不是将其删除。

在td内部覆盖将表格单元向外推

1 个答案: