php - 谷歌地图作为wordpress中小部件的背景

我试图将谷歌地图作为我的小部件的背景来实现。我有两个div，一个用于地图，另一个用于应该在地图顶部的文本。为了实现这一点，我在css文件中使用了不同的z-index值。这是小部件的代码：

echo $before_widget;
  $bg_image_style = '';
  if ( !empty( $background_image ) ) {
     $bg_image_style .= 'background-image:url(' . $background_image . ');background-attachment:' . $bg_attachment . ';background-repeat:no-repeat;background-size:cover;';
  }else {?>
  <?php }?>
  <?php if ( !empty( $background_image ) ) {?>
       <div class="call-to-action-content-wrapper clearfix"  style="<?php echo $bg_image_style; ?>">
  <?php } else {?>
       <div id="container">
  <?php }?>
     <div class="inner-wrap">
        <?php if( !empty( $text_main ) ) { ?>
           <h3>
              <?php echo esc_html( $text_main );
              if( !empty( $button_text ) ) { ?>
                 <a class="call-to-action-button" href="<?php echo $button_url; ?>" title="<?php echo esc_attr( $button_text ); ?>"><?php echo esc_html( $button_text ); ?></a>
              <?php } ?>
              <?php if( empty( $button_text ) ) { ?>
                  <a class="fancybox-inline call-to-action-button" href="#contact_form_pop">Contact us</a>
              <?php } ?>
           </h3>
        <?php } ?>
     </div>
  <div id='map-canvas'></div>
  </div>

  <?php echo $after_widget;

如果背景图片$ background_image不为空，我使用：

<div class="call-to-action-content-wrapper clearfix"  style="<?php echo $bg_image_style; ?>">

然而，当它为空时，我想在后台有一张地图，所以我使用另一个div：

<div id="container">

在＆＃34;容器＆＃34;的结束标记之后div我把地图div：

 <div id='map-canvas'></div>

这是CSS：

    .business-template .widget.widget_call_to_action_block .call-to-action-    content-wrapper {
      padding: 100px 0;
    }

    .call-to-action-content-wrapper h3 {
    padding-bottom: 0;
    font-size: 26px;
    color: #ffffff;
    line-height: 2;
    text-align: center;
    }

    #map-canvas {
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    }

    #container {
    z-index: 100;
    position: relative;
    }

    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    .clearfix {
    display: inline-block;
    }

   .inner-wrap {
    max-width: 1100px;
    margin: 0 auto;
    z-index: 9999;
    }

   .business-template .widget.widget_call_to_action_block > .inner-wrap,
   .business-template .widget.widget_portfolio_block > .inner-wrap {
    max-width: 100%;
    }

然而，尽管有z-index，地图始终位于顶部。你对html和css有什么建议吗？也许我做错了什么。

最佳答案：

0 个答案: