CSS定位：固定定位

Question

我有一个 position:fixed 的 <div>，它出现在屏幕中央。当有消息时，会在第一个 <div> 旁边再添加一个 position:fixed 的 <div>。

我发现在不同的屏幕尺寸上（比如小屏幕的 netbook），这些 <div> 会相互叠加。

有没有办法让它们的位置相对固定？我试过使用固定的容器来容纳它们，但它们仍然移动。

 <div id="container">
    <div id="container"></div>
    <div id="container"></div>
 </div>

编辑：

<div id="wrapper">
    <div id="container1"></div>
    <div id="container2"></div>
 </div>

CSS - 当我改变屏幕大小时，容器1和容器2仍然会移动。

#wrapper {
  position: fixed
}
#container1 {
  position: fixed
}
#container2 {
  position: fixed
}

我需要在容器1/2的div上使用相对定位吗？

- Adam

---

通过隐藏你的CSS代码，你并没有透露太多信息。 - Sparky

关于您在跟进编辑中提出的评论，请查看我下面的完整答案，以了解大小和位置方面的信息。此外，再次询问，您的CSS代码是什么？我知道您仍然不愿意公开它，因为仅仅在代码中加入position:fixed并不能将某物居中放置在屏幕上。 - Sparky

Answer 1

最重要的是，id 是唯一的。您不能在三个不同的元素上使用 id="container"。每个元素必须具有自己的id。

<div id="container">
    <div id="container"></div>
    <div id="container"></div>
</div>

Should be something like this...

<div id="wrapper">
    <div id="container1"></div>
    <div id="container2"></div>
</div>

另外，你的CSS代码在哪里？

如果您不希望这些元素随着窗口大小的变化而互相推动，请指定每个容器的确切大小和位置。

编辑：没有看到此页面的示例、演示或更好的描述时，这只是一种猜测。

您可以将固定位置放在包装器上，然后在其中的

上放置确切的大小和位置。

- Sparky

Answer 2

position: fixed CSS规则可以将元素的位置固定在屏幕上。一旦你将其设置为fixed，它就不会从你放置它的位置移动。由于你将fixed应用于所有元素，所以你会看到这些元素堆叠在一起（可能在屏幕左上角，因为你没有提供顶部或左侧值）。

如果你想让子元素出现在固定容器内，只需不将position: fixed添加到它们中，它们就会很好地呈现在父元素内。

当然，所有这些都是纯粹的猜测，因为我们无法看到你的问题示例，也无法看到你想要的结果。

- Chris

---

如果OP想要固定定位（相对于视口固定），那么使用相对和绝对的组合对他没有好处。我同意，如果没有更多信息，这都是猜测。 - Sparky

确实。当实际问题和期望结果都是未知的时候，解决问题有点不可能 :) - Chris

Answer 3

你不能像这样固定你的div位置。首先，你必须找到包含你想要居中的div的父div的屏幕尺寸。

<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
        var winW, winH;
        winW = document.getElementById('parent').availWidth;
        winh = document.getElementById('parent').availHeight;
   }

这是如何获取父级 div 可用大小的方法。然后根据它设置父级 div 的宽度和高度。现在，如果您有父级 div 的宽度，那么很容易将 middle_div 设置在父级 div 的中间。

- Deepak Gupta

---

假设他只是忽略了透露他所有的代码。当他已经告诉你它正在被固定和居中时，他肯定不需要知道如何居中某些东西。 - Sparky

@sparky：我刚刚给了他一个想法，他可以通过它来获取小屏幕下父级div的大小。根据这个大小，他可以动态地调整这两个div的大小... - Deepak Gupta

由于我们无法看到他的实际代码，甚至不知道他想要什么，所以您已经为一个尚未知问题提供了具体答案。 - Sparky