将 div 定位在另一个 div 下方答案

【问题标题】：Positioning div underneath another div将 div 定位在另一个 div 下方
【发布时间】：2014-02-26 02:27:17
【问题描述】：

我有一个包含菜单的 div 和另一个用于搜索框的 div。每当我在搜索框中输入时，结果都在菜单 div 下方

顺便说一句。我使用 Sergey Pimenov 的 Metro UI

这是我在主页上的代码：

    <html>
<head>
    <!--metadata-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="Jan Adrian Fetizanan, Philippines, Manila">
    <!--stylesheets-->
    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <link href="js/prettify/prettify.css" rel="stylesheet">
    <!--Javascripts-->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <script src="js/jquery/jquery.mousewheel.js"></script>
    <script src="js/jquery/jquery.dataTables.js"></script>
    <script src="js/prettify/prettify.js"></script>
    <!-- UI plugin -->
    <script src="js/load-metro.js"></script>
    <script>
        function showResult(str)
        {
            if (str.length==0)
            {
                document.getElementById("livesearch").innerHTML="";
                document.getElementById("livesearch").style.border="0px";
                return;
            }
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
                }
            }
            xmlhttp.open("GET","livesearch.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
    <style>
        .container {
            width: 1040px;
        }
    </style>

    <title>EUG</title>
</head>
<body class="metro">
    <div class="container">
        <header class="margin20 nrm nlm">
            <div class="clearfix">
                <a class="place-left">
                    <h1>TEST</h1>
                </a>
                <div class="place-right">
                    <form>
                        <div class="input-control text size6 margin20 nrm bg-white">
                            <input type="text" name="q" placeholder="Search..." onkeyup="showResult(this.value)">
                            <div class="element" id="livesearch"></div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="main-menu-wrapper">
                <ul class="horizontal-menu nlm">
                    <li><a href="#">eug</a></li>
                    <li><a href="#">shipping</a></li>
                    <li><a href="#">tracking</a></li>
                    <li><a href="#">freight</a></li>
                    <li><a href="#">location</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">about</a></li>
                </ul>
            </div>
        </header>
        <div class="main-content clearfix">
            <div class="grid fluid">
                <div style="float: right; ">
                    <div class="span3">
                        <div class="panel">
                            <div class="panel-header bg-lightBlue">
                                TESTING
                            </div>
                            <div class="panel-content">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

这是来自 livesearch.php 的代码

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
  {
  $y=$x->item($i)->getElementsByTagName('title');
  $z=$x->item($i)->getElementsByTagName('url');
  if ($y->item(0)->nodeType==1)
    {
    //find a link matching the search text
    if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
      {
      if ($hint=="")
        {
        $hint="<a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue . 
        "' target='_blank'>" . 
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
        $hint=$hint . "<br /><a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue . 
        "' target='_blank'>" . 
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;
?>

【问题讨论】：

标签： css microsoft-metro

【解决方案1】：

你可以试试添加

document.getElementById("livesearch").style.zIndex="1000";

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

将其设置为 1000，因此希望它是最顶层的元素

【讨论】：

【解决方案2】：

您可能会发现此页面很有用

http://www.w3schools.com/cssref/pr_pos_z-index.asp

z-index 是一个 CSS 属性，它可以让 HTML 元素“靠近”或“远离”查看器。因此，您应该能够将搜索框及其结果的 z-index 设为 1，并将其放在所有其他 div 的前面

【讨论】：