个人中心
gpt4 book ai didi

css - 将 div 定位在另一个 div 之下

转载 作者：行者123 更新时间：2023-11-28 11:10:14 24 4
gpt4 key购买 nike

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

error

顺便说一句。我使用 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;
?>

最佳答案

你可以尝试添加

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

注意: z-index仅适用于定位元素(position:absolute、position:relative 或 position:fixed)。

将它设置为 1000，这样它就有希望成为最顶层的元素

关于css - 将 div 定位在另一个 div 之下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22030490/

24 4 0
文章推荐： javascript变量等于函数中的值
文章推荐： json - 为什么我的 commonName 在我的循环中重复相同的内容？
文章推荐： ios - 来自外部类的 addTarget
文章推荐： php - codeigniter加载一个没有任何html标题的 View 进行打印
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com