如何保持背景DIV出现desptie滚动垂直

我有两个div（一个在背部，另一个是关于它的字体）。背景Div显示Google地图，并精确填充屏幕（宽度= 100％，高度= 100％）。但前景DIV，它的高度要大得多。如何保持背景DIV出现desptie滚动垂直

如何允许与保持谷歌地图它的位置固定，尽管垂直滚动前台DIV垂直滚动？

正如你看到的。背景图像是固定的，尽管垂直

2011-10-17 Adham

我更新的例子，包括背景图像 – zehelvion

仅仅包裹在一个固定的容器中的图。

<head> 
    <style type="text/css"> 
    #map-wrapper,#maps{ width:100%; height:100%; } 
    #map-wrapper{ position:fixed; } 
    #article{ 
     position:absolute; width:50%; height:200%; 
     margin:0 0 20px -25%; 
     background:#000 url(http://placekitten.com/1500/1000) center center no-repeat; 
     text-align:center; overflow:hidden; 
    } 
    </style> 
</head> 
<body> 
    <div id="map-wrapper"> 
    <div id="maps"></div> 
    </div> 
    <div id="article"></div> 
</body>

在Mac OSX上测试最新版本的Chrome，FF，Opera和Safari。

在这里找到了答案： http://groups.google.com/group/google-maps-api/browse_thread/thread/33a3ed4d8cb6ba04?pli=1

但是被放大地图的问题，出来的时候，用户将鼠标悬停在“背景”仍然存在。

祝你好运！ :)

来源

2011-10-17 18:53:06 chris

正是我所追求的。但我不明白新问题：D – Adham

取决于您对Google地图的实施。但是，如果我只是从这里获取纯代码：http://code.google.com/apis/maps/documentation/javascript/tutorial.html并将其输入到上面的示例中。每当我的鼠标移动到“前景”时，我确实会滚动整个页面，但是只要我的鼠标位于“背景”上，就不要滚动页面，而是缩放地图。 – chris

你的意思是使用滚轮滚动？！ – Adham

滚动你应该只能够添加background-attachment:scroll到上有背景图像的<div>。

来源

2011-10-17 18:11:14 Clive

其实我有DIV，显示谷歌地图。我想你已经发布的，但它didin't帮助:( – Adham

'位置：？？fixed'也许 – Clive

-1

我希望下面的CSS可以帮助你：

body { 
    background-image: url('smiley.gif'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
}

Reference

来源

2011-10-17 18:11:20 Grigor

使用固定的定位

例如

http://jsfiddle.net/aysXW/4/

HTML：

<div id="fg"> 
this is the foreground 
</div> 

<div id="bg"> 
123 ... this is the background 
</div>

CSS：

div#fg{ 
    position: absolute; 
    top: 0px; 
    z-index: 1; 
    height: 1000px; 
    left: 25%; 
    width: 50%; 
    color: white; 
    border: green 5px solid; 
} 

div#bg{ 
position: fixed; 
top: 0px; 
left: 0px; 
z-index: 0; 
width: 100%; 
height: 100%; 
background: url('http://img2.socwall.com/Nature/General/200717041506-1877.jpg') no-repeat blue; 
}

我希望这有助于

您不必定义像素高度或宽度，我只是用它作为一个例子。

来源

2011-10-17 18:17:24 zehelvion

我可以使背景的位置在同一时间是固定的，绝对 – Adham

新problrm是..当我将代表谷歌地图V3.0的DIV的位置设置为“固定”..不会再出现..当我将位置设置为“绝对”时，它出现了，为什么？ – Adham

你能分享一个链接吗？我们可以做的是绝对的，并使用jQuery的滚动条移动它，但我想首先看到它。 – zehelvion

如何保持背景DIV出现desptie滚动垂直

回答

相关问题