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;
}

私が直面している問題は、2 番目の列の表のセルが行の外に出ていることです。私の考えは、入力に基づいて一度にテキストボックスまたは画像を表示することでした。Skydrive にアップロードされているスクリーンショットも見つけ てください

誰でもこの問題を解決する方法を教えてもらえますか?

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 に答える