css - 定位一个 div（出现在 jsp 文件的底部）以显示在所有其他 div 的顶部

Question

我有一个类似这样的页面

<div id="top">
</div>
<div id="bottom">
</div>

我想要一个先显示底部然后显示顶部的输出。我如何使用 CSS 来实现这一点？

Answer 1

借助“职位”，您可以实现这一目标..

Answer 2

If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.

If you want #top and #bottom to be independent DOM elements.

div#top {
  width:200px;
  height:100px;
  background-color:red;
}

div#bottom {
  position:absolute;
  width:100px;
  height:50px;
  background-color:blue;
  top:10%;
  left:4%;
}

• The top and left values are values of your choice, the above example places the bottom inside the top.

• positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.

If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say

document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none'; 

After a timeout setTimeout(function() { document.getElementById('top').style.display = 'block'; }, 200);

Since independent div's are not the best way to do this, would rather suggest you to try Something like this

<div id="top_div">
   <div id="bottom_div">
   </div>
</div>

Answer 3

在 css 中使用 Position 它应该可以在下面尝试

<div id="bottom">
 </div>
 <div style="clear:both;"></div>
 <div id="top">
</div>

Answer 4

HTML 页面从上到下呈现。反转您的 div 标签，如下所示：

<div id="bottom">
</div>
<div id="top">
</div>

除非您有特定的理由不这样做。