Wordpress页面html代码，因此谷歌自定义搜索框位于图像上方_Html_Wordpress

Wordpress页面html代码，因此谷歌自定义搜索框位于图像上方

html wordpress

Wordpress页面html代码，因此谷歌自定义搜索框位于图像上方,html,wordpress,Html,Wordpress,我想创建一个wordpress页面，我可以把html代码做如下请 1）谷歌自定义搜索框（我可以从谷歌获得GCS代码），但它必须位于图像上方。不在图像的上方或下方：）。图像将托管在我的网站媒体库中 2）搜索框下方的圆形图标按钮类似于我附加的按钮，当鼠标悬停时会反弹（这些图标的图像可以更改，目标URL可以由我指定）附带的示例是firefox的yahoo新标签扩展感谢您的帮助。我附上了示例页面图像和该页面的查看源代码，以帮助理解我的上下文。不同之处在于，搜索将由谷歌而不是雅虎进行谢谢朋友

我想创建一个wordpress页面，我可以把html代码做如下请

1）谷歌自定义搜索框（我可以从谷歌获得GCS代码），但它必须位于图像上方。不在图像的上方或下方：）。图像将托管在我的网站媒体库中

2）搜索框下方的圆形图标按钮类似于我附加的按钮，当鼠标悬停时会反弹（这些图标的图像可以更改，目标URL可以由我指定）

附带的示例是firefox的yahoo新标签扩展

感谢您的帮助。我附上了示例页面图像和该页面的查看源代码，以帮助理解我的上下文。不同之处在于，搜索将由谷歌而不是雅虎进行

谢谢朋友们

查看下面的代码，因为它不允许我附加文档

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link rel="stylesheet" type="text/css" href="newtab.css">
    <link rel="stylesheet" type="text/css" href="brand.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body id="bg" class="flexContainer bgImage">
<div id="bookmarksAbsolute">
    <div id="bookmarksFlex" class="uiBG"></div>
</div>

<div id="searchTrendingNowContainer"></div>

<div id="mainContainer">
    <div id="uiBlur"></div>
    <div id="uiContainer">
        <form id="submitSearchNew">
            <img id="magnifierNew" src="icons/mag3.svg">
            <input type="text" id="searchBoxNew" autocomplete="off" name="p" tabindex="1">
        </form>
        <div id="searchSuggestContainerNew" class="searchSuggestContainerNew displayNone"></div>
    </div>
    <div id="urlHidden"><span id="urlContent"></span></div>
</div>

<div id="darkOverlay"></div>
<div id="pageFooter">
    <div id="ownerContainer">
        <a id="ownerName" class="credit"></a>
        <a id="onFlickr" class="credit flickr"></a>
    </div>

    <div class="newTopSitesContainer" id="topSites"></div>

    <div id="urlInfo"></div>
</div>

<div class="dropup" id="dropupMenu">
        <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
        </button>
        <ul class="dropdown-menu options-list">
            <li><a id="toggleViewText" class="toggleText unselectable"> </a></li>
            <li class="divider"></li>
            <li id="tnDiv" class="displayNone"><a id="toggleTN" class="unselectable"> </a></li>
            <li id="tnDivider" class="divider displayNone"></li>
            <li><a id="editButton" class="unselectable"> </a></li>
            <li class="divider"></li>
            <li><a id="feedBack" class="feedBackLink unselectable"> </a></li>
        </ul>
    </div>

</body>
<script src='newtab.js'></script>
</html>

我不明白您的意思，您是否需要在其他图像中显示输入标签和图像

如果是，请对图像使用z索引CSS，例如：

<div class="base"> <!-- z-index = 1 -->
<input type="search" class="search" /> <!-- z-index = 2 -->

<div class="buttons_footer"> <!-- z-index = 2 -->
<button></button>
<button></button>
<button></button>
.....
</div>
</div>


.....

我希望能帮忙

嗨，丹尼尔，谢谢你的留言。1）如果你看我的附加图像，（[1]：）基本上我可以通过弹出G给我的代码，在我的wordpress页面中创建google自定义搜索框。然而，如果我想将这个搜索框覆盖在我想要的图像上，这是我试图弄清楚的棘手部分。2）还有下面的圆形按钮，可以反弹到鼠标（这是可选的哈哈）。关于第一个要求有什么想法吗？因此，基本上我想为每个背景图像创建一个不同的页面，在图像中使用谷歌自定义搜索框，如示例所示。（谷歌自定义搜索引擎给了我在html中弹出的代码，但问题是如何覆盖图像）在元素中添加CSS z-index，如果为图像添加z-index 1，并在输入元素和按钮中添加z-index 2，则输入和按钮元素将显示在图像上。