Question

尝试使用固定的非滚动标题区域（称为＆＃34; top_box＆＃34;）和可滚动的内容区域（称为＆＃34; middle_box＆＃34;）来构建网站。

top_box是position：absolute。 middle_box是position：relative。

中间框是＆＃34;忽略＆＃34; top_box并显示在top_box上，而不是显示在它下面。

＆＃13;

#top_box {
  position: fixed !important;
  position: absolute;
  top: 2%;
  height: 20%;
}
#middle_box {
  position: relative;
  height: 70%;
  overflow: auto;
}

＆＃13;

<div id="top_box">
  ...
</div>

<div id="middle_box">
  ...
</div>

＆＃13;

有什么想法为什么middle_box会忽略top_box并从屏幕顶部开始而不是从top_box下面开始？

Answer 1

为什么你必须将position:relative提供给第二个框？

＆＃13;

#top_box {
  position: absolute;
  top: 2%;
  height: 20%;
  background:red;
}
#middle_box {
  position: absolute;
  top:20%;
  height: 70%;
  background:blue;
}

＆＃13;

<div id="top_box">
  TOP
</div>

<div id="middle_box">
  BOTTOM
</div>

＆＃13;

Answer 2

问题是position: fixed或position:absolute将div从流中取出。因此，您的相对 div不会注意到上面已经有一个。所以它将被置于顶部。

要实现您想要的功能，您必须将CSS更改为以下内容。

我已将内容设置为#middle_box div height: 1000px，因此您可以看到内容区域可滚动，而其他div #top_box保持在最顶层。

body {
  margin: 0;
}
#top_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: #eee;
  z-index: 100;
}
#middle_box {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.3);
}

<div id="top_box">
  top_box
</div>

<div id="middle_box">
  middle_box
</div>

Answer 3

#top_box{ 
position: fixed;
top: 2%;
height: 20%;
overflow: hidden;
}

#middle_box
{
position: fixed;
top: 22%; /* this should set to 22%-30% depending at where do you want it*/
height: 70%;
overflow: auto;
}

Answer 4

svn cat -r 1700 ^/trunk/newpath/file优先于fixed !important;

下面它不会，因为它将在父中启动，而不是在它下面

absolute

#top_box {
  position: absolute;
  top: 2%;
  height: 20%;
  
  background-color: yellow;
}

#middle_box {
  position: relative;
  height: 70%;
  overflow: auto;

  background-color: blue;
}

Answer 5

我不知道你对可滚动内容区域的意义。我认为你的意思是当有溢出内容时它是一个滚动部分。如果那个可滚动的内容需要你想要溢出滚动。你可以不使用位置来做到这一点。我将中间框％更改为px，以便在溢出内容时滚动。任何问题都要求我发表评论谢谢。

#top_box {
  text-align: center;
  height: 20%;
  border: 1px solid blue;
}

#middle_box {
  overflow: auto;
  height: 280px; /*change the height otherwise 70% will never scroll that content*/
  background: red;
  border: 1px solid black;
  color: white;
  text-align: justify;
padding:0 10px;
}

h1.tittle {
  text-align: center;
}

#footer_box {
  border: 1px solid yellow;
  text-align: center;
}

<div id="top_box">

  <h1>
Non-scroll Top Header area
</h1>

</div>

<div id="middle_box">
  <h1 class="tittle">
Scrolling Header 
</h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
  has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
  took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
  leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
  versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
  type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
  recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
  the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
  Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
  remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
  not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
  like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
  type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
  industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
  typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem
  Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
  not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
  like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
  type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer_box">

  <h1>Footer area</h1>

</div>

CSS div（位置相对）忽略另一个div（position：absolute）

5 个答案: