0

例如：第一区：

<div style='position: fixed; width=100%'> ....</div>

现在我想在前一个 Div 的正下方放置另一个 Div 5px。所以我做了

<div style='padding-top:5px; width=100%'> ....</div>

但它没有用，似乎padding-top将自己与窗口顶部进行比较，而不是与之前的 Div 进行比较。如果我在第一个 div 中删除position: fixed;它，那会很好，但我不希望这样。

我希望第一个 Div 的位置固定，第二个 Div 的位置在第一个 Div 的正下方 5px。那么该怎么做呢？

4

5 回答 5

3

position: fixed从常规流中删除元素。您不能再使用流定位。

可能有适当的方法来做你想做的事，但我不知道你想要什么，因为你告诉我们的是 Y，而不是 X：https ://meta.stackexchange.com/questions/66377/what-is-the- xy问题

我想我明白你想要什么。如果你总是知道标题有多高，你可以添加一个偏移量，填充和边距应该都可以工作。

<div id="header" style="position: fixed; top: 0; width: 100%; height: 20px;">
<div id="content" style="margin-top: 20px;">Content goes here</div>

如果标题可以更改高度，请调整您的 CSS，以便标题和内容分别更改它们的高度和内容。

<div id="container" class="adjustheaderheight">
    <div id="header">
    <div id="content">Content goes here</div>
</div>

#header { position: fixed; top: 0; width: 100%; height: 20px; }
#content { margin-top: 20px; }
#container.adjustheaderheight #header {
    height: 40px;
}
#container.adjustheaderheight #content {
    margin-top: 40px;
}

如果您的标题动态更改高度，则您需要动态更改内容偏移量，尽管我强烈建议您不要使用动态标题。

于 2013-10-01T12:26:10.803 回答
0

如果您尝试过 Margin 并且它不起作用，只要您在 div 中没有背景颜色或图像，就可以随意使用填充，那么您将无法区分这两种方法之间的区别.

于 2013-10-01T12:47:29.863 回答
0

您可能希望将这两个部门都包含在另一个部门中，并固定这个新的外部部门位置。像这样--->

<div style='position: fixed; width=100%'>
  <div style='width=100%'> ....</div>
  <div style='padding-top:5px; width=100%'> ....</div>
</div>
于 2013-10-01T12:31:52.830 回答
0

将两个 div 放入定位固定的包装器中。你也有无效的CSS语法宽度= 100％必须是宽度：100％。

<div style="position: fixed;">
   <div style=' width:100%'> ....</div>
   <div style='margin-top:5px; width:100%'> ....</div>
</div>

但是，这会使 2 个 div 固定...这可能不是您想要的。您可以执行以下操作：

    <div style='position: fixed; width:100%'> ....</div>
   <div style='position:absolute; width:300px;height:200px;top:300px;left:300px'> ....</div>

CSS值只是例如......

更新：

这是你想要的吗？ http://jsfiddle.net/kasperfish/K8N4f/1/

<div id="fixed">fixed</div>
<div id="widget" >content <br>hjgjhgjhgjhgh</div>

#fixed{
    width:100%;
    position:fixed;
    background:yellow;
    height:50px;
    z-index:2;
}
#widget{

    background:blue;
    position: absolute;
    top:55px;
    margin-top:15px;
    width:100%
}
于 2013-10-01T12:27:23.277 回答
0

您是否尝试过margin-top？ margin-top: 5px

于 2013-10-01T12:27:27.553 回答