Question

我有一个名为目标的div，当你平移到地图标记时，它会居中显示在谷歌地图上，我已经在地图的左边添加了一个菜单，这意味着当谷歌地图平移到标记时不再是屏幕的中心。

我需要将div移到右边，但我似乎无法移动它。

#target {
    position: fixed; 
    display: none; 
    width: 51px; 
    height: 51px; 
    top: 50%; 
    left: 50%; 
    margin: -40px 0 0 -26px; 
    background: url(../img/target.png) no-repeat center bottom; 
    z-index: 2;
}

Screenshot

Answer 1

你应该能够通过略微一点来纠正你的问题。通过添加正值来更改第4个值，使其大于-26px。例如：margin: -40px 0 0 20px;。

margin中的第4个值指定左边距值，这会将div移到右边。

替代地

您可以将地图和目标div包装在与菜单不同的div中，但您必须将目标position值更改为 relative 或 absolute 已修复：

<body>
    <div id="wrapper" style="position:relative;"> <!-- map and target wrapper div. make sure this is position: absolute OR relative so that positioning will reference this div. -->
        <div id="map">...</div>
        <div id="target"></div>
    </div>

    <div id="menu">
        ...
    </div>
</body>

使用这种替代解决方案，目标和地图与同一个div对齐，几乎就像它们在自己的窗口中一样。

Answer 2

如果没有更多信息，我只能猜测，但我认为position属性可能是您的问题。

position属性可以有四个值：

静态（默认）
相对
绝对
固定

（它也有继承，但这不是真正的价值）

带有static或relative的元素在页面上保留其“框”，这意味着它仍保留其原始空间。

另一方面，具有absolute或fixed的元素实际上会返回其空间，并让其他元素填充该空间。相反，它根据其他元素定位自己。对于absolute，它是位置设置为relative或absolute的最近父级，对于fixed值，它是浏览器的视口。

这意味着无论您添加到页面中，目标元素都不会移动。

我可能会更改标记，因此您有一个地图视图的div，包含目标和实际地图。

<body>
    ... some stuff ...
    <div id="mapContainer">
        <div id="target"></div>
        <div id="map"></div>
    </div>
    ... more stuff ...
</body>

然后使用绝对定位将目标元素放置在容器的中心。

Answer 3

调整左边的数量：属性。

将50％更改为60％或调整金额以适合所需的位置。

Answer 4

使用CSS，无法向右移动。因为它迫使它集中在中心

position: fixed;
left: 50%; /* be in the center */
top: 50%;

要更改位置，请删除left属性并更新css以阅读以下内容。

right: 0;
top: 50%;

将居中的中心转移到右侧

4 个答案:

替代地