Question

我有一个固定的DIV。页面内容应该在DIV之后显示，但它们在DIV下 - 部分隐藏在它之下。我怎么能避免这个？

这是DIV的风格：

#top_div {
  position: fixed;
  float: left;
  top:0;
  width: 100%;
  height: 20%;
  background-color: black;
}

Answer 1

看看这个。

Fixed Div

<强> HTML：

<div>Fixed div</div>Can we see this?

<强> CSS：

div {
    position: fixed;
}

Now without fixed

<强> HTML：

<div>Not Fixed div</div>Can we see this?

<强> CSS：

div {

}

只是为了告诉你不同之处。您可以看到div后position: fixed位于内容之上。 div始终会在屏幕上停留在该位置。那是什么修复了。你不想要这个（我没有想到，因为你没有解释你想要它做什么）所以只需删除它。

position:fixed处理可以滚动的页面的示例，您将看到它始终在屏幕上。

Example Here

不要使用固定，因为这是导致问题的原因。

Answer 2

我们不知道您的整个代码，但是如果它就像

<div id="container">
   <div id="fixed">fixed</div>
   //a lot of html code here
</div>

将一些top-padding放到.container div中，padding等于固定div的高度

Answer 3

我认为您正在努力实现这一目标（http://jsfiddle.net/6Q9w4/8/）

.header {
    height: 20%;
    background-color: #4679bd;
    position: fixed;
    width: 100%;
}
.content {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    overflow: scroll;
}

为什么内容在固定的DIV下流动？

3 个答案: