动态内容页面，如何避免绝对div覆盖（普通div和文本）

Question

我有一个“红色”div，我想强制在“黑色”div下，并在页脚下的文字下面“红色”div shoudld超过{ {1}}与班级div。查看我的fiddle。

我的错在哪里？

我应该改变什么......？

f_content的技巧会带来负面影响。

感谢您的时间。

Answer 1

你走在正确的轨道上，你用z-index做到了。只需记住始终将position设置为要设置索引的元素。 见下文，红色div位于黑色底部之下但位于蓝色页脚之上：

的 Working demo

基本上这是代码中唯一需要的更改：

.wsp_box_data .image { 
  position: relative;
  z-index:  2;
}

Answer 2

我得到了一个解决方案：

    `f_content`
    position: relative;
    z-index: 2;


    `image`
    position: relative;
    z-index: 3;

   `cow_object`
   z-index: -1

live solution