为什么绝对定位元素显示在静态元素上? [英] Why does absolute positioned element is displayed over a static one?

问题描述

我知道绝对定位会破坏常规流程，但是由于HTML中的顺序首先是绝对元素，然后是静态元素，所以我希望它也能在显示顺序中得到体现.

I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too.

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
}

<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

我需要这个的原因是因为我想显示一个滑动菜单(".absolute" div )，该菜单从下向上滑动，看起来像是从'背面来的.静态的 div .容器 div 显然需要具有溢出:可见".

The reason I need this is because I want to display a sliding menu (the '.absolute' div) which slides from bottom to up and appears like it's coming from the back of the '.static' div. The container div will obviously need to have 'overflow: visible'.

有什么想法要实现吗?

也许需要另一种技术?像CSS clip 一样?

Maybe another technique is needed? Like CSS clip?

推荐答案

以上两个答案都充分说明了您所面临的情况.鉴于当前的问题，您可以使用此解决方案.只需将 position:relative 添加到静态div.

Both the answers above give the adequate explanation to the situation you are facing. Given the problem at hand you can use this solution. Just add position:relative to the static div.

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
  position: relative;
}

<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

这篇关于为什么绝对定位元素显示在静态元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！