javascript - 弹出窗口/面板不会通过 javascript 出现在正确的位置

Question

我创建了一个显示成员列表的页面。我创建了一个 Javascript 函数，它在 ID 为 divpreview、position:absolute 和 z-index:100 的面板中显示用户的详细信息弹出窗口/面板可以，但我无法在成员上方显示它。

<div runat="server" id="divpreview" class="preview">
    </div>

    <script type="text/javascript" language="javascript">
        function showdiv(id, m, pos) {

            var arr = new Array(7);
            arr = id.split("###");
            var divhtml = "";
            divhtml += "<table border='1'  style='background-color:#1C5E55;color:white;absolute' cellpadding='3' cellspacing='0'><tr><td>Sponsor Id</td><td>" + arr[0] + "</td></tr>";
            divhtml += "<tr><td>Total Left Point</td><td>" + arr[1] + "</td></tr>";
            divhtml += "<tr><td>Total Right Point</td><td>" + arr[2] + "</td></tr>";
            divhtml += "<tr><td>Total Left Investment</td><td>" + arr[3] + "</td></tr>";
            divhtml += "<tr><td>Total Right Investment</td><td>" + arr[4] + "</td></tr>";
            divhtml += "<tr><td>Self Point </td><td>" + arr[5] + "</td></tr>";
            divhtml += "<tr><td>Expiry Date</td><td>" + arr[6] + "</td></tr>";

            divhtml += "</table>";
            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").innerHTML = divhtml;
            var left = m.clientX + 10;
            if (pos == 1) {
                left = m.clientX - 230;
            }
            else {
                left = m.clientX + 10;
            }
            debugger;

            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.left = left.toString() + 'px';
            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.display = "block";
            var top = 0;
            top = document.documentElement.scrollTop + m.clientY - 50;
            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.top = top.toString() + 'px';
        }
        function hidediv() {
            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.display = "none";
        }
        function movediv(m, pos) {
            var left = m.clientX + 05;
            if (pos == 1) {
                left = m.clientX - 200;
            }
            else {
                left = m.clientX + 10;
            }

            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.left = left.toString() + 'px';
            var top = 0;
            top = document.documentElement.scrollTop + m.clientY - 50;
            document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.top = top.toString() + 'px';
        }
    </script>

我希望面板出现在星星附近。我该怎么办。

Answer 1

使用

position: relative;

到父 div。位置绝对元素将在找到最近的定位相对或定位绝对元素时“停止”。