Fatal编程技术网
  • css/
  • Css 将中心div移到右侧

Css 将中心div移到右侧

css

Css 将中心div移到右侧,css,Css,我有一个名为target的div，当你平移到一个地图标记时，它会居中显示在谷歌地图上，我在地图左侧添加了一个菜单，这意味着当谷歌地图平移到一个标记时，它不再是屏幕的中心 我需要把潜水器移到右边，但我似乎无法移动它 #target { position: fixed; display: none; width: 51px; height: 51px; top: 50%; left: 50%; margin: -40px 0 0 -

我有一个名为target的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;
}

你应该能够通过稍微调整一下边距来纠正你的问题。通过添加正值更改第四个值，使其大于-26px。例如：
margin:-40px20px


margin
中的第四个值指定了左边距值，这将使div向右移动

或者
您可以从菜单中将地图和目标div包装在一个单独的div中，但您必须将目标
位置
值更改为相对或绝对，而不是固定：


<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，就像它们在自己的窗口中一样。
调整left:属性的数量


将50%更改为60%或调整数量以适合所需位置。
使用CSS时，无法向右移动。因为这是迫使它居中的原因


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


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


right: 0;
top: 50%;



没有更多的信息，我只能猜测，但我认为
位置
属性可能是您的问题


position
属性可以有四个值：


    

  • 静态（默认）
    • 

  • 相对的
    • 

  • 绝对的
    • 

  • 固定的
    • 


（它也有inherit，但这不是真正的值）

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

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

这意味着无论向页面添加什么，目标元素都不会移动

我可能会更改标记，以便为地图视图提供一个div，其中包含目标和实际地图


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




... 一些东西。。。
... 更多的东西。。。



然后使用绝对定位将目标元素放置在容器的中心。
我认为包装器选项是可行的，因此在调整窗口大小时，它位于正确的位置。问题是，如果我添加包装器，地图根本就不会加载？