Question

我的主页代码：

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">
        div
        {
            width:100%;
            height:100px;
            background-color:rgba(189,123,124,1.00);
            position:absolute;
            bottom:0;

            /* make this div TOPMOST */
            z-index:9000;
        }
        .container
        {
            /* make the page that will be loaded appear below the div */
            z-index:200;
        }
    </style>
    </head>
    <body>

        <div>
            <div class="container">
            </div>
        </div>

        <script type="text/javascript">
            $(document).ready(function()
            {
                $(window).on("click", function()
                {
                    $("div.container").load("Page1.html");
                });
            });
        </script>

    </body>

正如您在上面所看到的，我试图让底部的红色div栏显示在最顶层，这样当用户点击浏览器窗口时加载Page1.html时，底部的这个红色栏仍然位于顶部

现在，我的Page1.html代码：

<head>
<style type="text/css">
    body, html
    {
        height:100%;
    }
    div
    {
        width:100%;
        height:100%;
        background-color:rgba(171,147,136,1.00);
    }
</style>
</head>

<body>
    <div>Page One</div>
</body>

然而，当Page1.html加载时，它完全位于红色div栏的顶部，div栏消失。看起来像Z-Index是没用的。我该如何解决这个问题？

您可以在此处查看实际页面：http://oneniceday.com/SR-1/Test2.html

Answer 1

尝试这样的事情

索引

 <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

        .footer
        {
            /* make the page that will be loaded appear below the div */
            z-index:200;
             width:100%;
            height:100px;
            background-color:rgba(189,123,124,1.00);
            position:absolute;
            bottom:0;

            /* make this div TOPMOST */
            z-index:9000;
        }

        body, html
    {
        height:100%;
    }

    </style>
    </head>
    <body>


        <div class="holder"></div>

     <div class="footer">
            </div>

        <script type="text/javascript">
            $(document).ready(function()
            {
                $(window).on("click", function()
                {
                    $("div.holder").load("Page1.html");
                });
            });
        </script>

    </body>

第1页

<style type="text/css">
    .data
    {
        width:100%;
        height:100%;
        background-color:rgba(171,147,136,1.00);
    }
</style>


    <div class="data">Page One</div>

我已从第1页删除了head和body标签，导致您的HTMl无效。你身体里面没有头标，身体里面也没有身体标签。部分视图/页面，如果将其附加到现有页面，则不应包含标题或布局。

AJAX：如何使加载的页面出现在调用它的页面下方

1 个答案: