1

さて、私は自分のウェブサイトの背景としてグーグルマップを実装しようとしました。しかし、このコードを使用してテキストをその上に配置しようとすると、次のようになります。

.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

そして、それは私にそれがマップの上にそれを表示しているマップにエラーを与えています、それは私が望むものですが、それは何らかの理由でマージンで動作していません。私のコードはすべてここにあります：http：//pastebin.com/uz6wwtYZ

ウェブページの中央のコンテンツと地図を背景として使用したいので、誰か助けてもらえますか。

ありがとう。

4

3 に答える 3

1

アイテムが絶対位置に設定されている場合は、マージンではなく上下を調整してみてください。

.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

それがお役に立てば幸いですか？また、上記で行ったように、より高いz-index値を設定することもできます。

自動マージン値を水平方向に中央に配置し、絶対的に配置したい場合は、それができないと思います。

代わりに、コンテンツに絶対幅を指定し、左側のプロパティをオフセットすることで、これを試すことができます。

    .content{
width: 500px;
    z-index: 100;
    background-color:fffff;
    position: absolute; top: 100px; left: 50%;
    height: auto;
    margin: auto;
margin-left: -250px; /* half the value of the width */
    }

コードを使用するJSFiddleへのリンクは次のとおりです。http： //jsfiddle.net/4FLKt/1/正常に機能しているようです。

マイキー。

于 2012-12-10T15:38:55.057 に答える
0

これは、を使用position: absolute;していて、それがとうまく機能していないためmargin:auto;です。

グーグルマップ上に全幅でその周りにdivを配置し、それを絶対にします...次に、そのdivで他のdivを中央に配置できます。

例

<div> //This div has position:absolute; and the width of the Google maps chart.
  <div> //This div has margin:0 auto;
     Content here
  </div>
</div>
于 2012-12-10T15:36:34.760 に答える
0

コンテンツを地図の上に配置してみましたか？

#map {
    z-index:1;
}
.content{
    z-index:100;
}
于 2012-12-10T15:38:36.497 に答える