Question

我有position:fixed <div>出现在屏幕中间。如果有消息，则会在第一个position:fixed旁边放置第二个<div> <div>。

我发现不同的屏幕尺寸（比如上网本 - 小屏幕）<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 - 当我更改屏幕尺寸时，container1和container2仍然会移动。

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

我是否需要在容器1/2 divs上使用相对定位？

Answer 1

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

<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代码在哪里？

如果你不希望这些东西在窗口大小改变时相互推挤，一种方法是指定每个容器的确切大小和位置。

修改

再一次，没有看到这个页面的例子，演示，或者你想要的更好的描述，这是推测。

你可以在包装上放置固定位置，然后在<div>内放置一个确切的大小和位置。

Answer 2

position: fixed CSS规则“修复”元素在屏幕上的位置。一旦你将它设置为fixed，它就永远不会从你放入它的位置移开。因为你将fixed应用于你的所有元素，你会看到元素堆栈（可能在考虑到您没有提供顶部或左侧值，屏幕的左上角。

如果您希望子元素出现在固定容器中，只是不要向它们添加position: fixed，它们将位于父元素内部。

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

Answer 3

你不能像这样修复你的div的位置。首先，您必须找到父div的屏幕大小，其中包含您想要在mid.like中的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的宽度，它很容易在父div的中间设置middle_div。

CSS位置：固定

3 个答案: