Question

我不确定是否可以使用纯CSS来完成。网站结构如下所示：

<body style="text-align:center;">
  <div style="max-width:1000px; margin: 0 auto;" id="mainWraper">
    <div id="fixedBox" style="position:fixed; top:100px; left:0;"></div>
  </div>
</body>

我想要做的是使fixedBox元素从顶部屏幕始终移位100px并与mainWraper的左侧对齐。 mainWraper响应最大宽度 - 1000px;

我知道可以用JS完成，但我也可以用css吗？

Answer 1

如果容器的宽度低于dd，则框将左对齐到视口。否则，它将与容器对齐：

<强>演示

Try before buy

Answer 2

为fixedBox分配一个边距，而不是使用固定位置：

#fixedBox{
  margin: 100px 0px 0px 0px; 
}

Answer 3

灰色框是您的fixedBox，它始终是从顶部100px并左对齐到主列

<body style="text-align:center;">
  <div style="width:1000px; margin: 0 auto; height:1000px; position: relative;" id="mainWraper">
    <div id="fixedBox" style="position:fixed; top:100px; left:0; width: 20px; height: 20px; background-color: #aaa;"></div>
  </div>
</body>

的问题：

始终给出固定的元素宽度和高度
添加了top: 100px，以便fixedBox保持距离顶部
给mainwrapper

固定元素左对齐到主列

3 个答案: