可柔性盒容器定位绝对

可以在一个柔性容器（A）绝对在前面或后面的另一种柔性的容器（B）的定位，仍然保持其子女的弯曲特性？可柔性盒容器定位绝对

我的问题：当我指定一个柔性容器（B）到的位置是：绝对的，内容孩子们失去内自动弯曲特性。当我切换回位置：相对，flex再次工作。当容器（B）是相对的，我不能像我需要的那样覆盖在另一个柔性容器（A）的顶部。

研究：在父容器（W3C和CSS技巧等）中找到所有关于儿童的绝对定位的东西，但没有足够的特殊性来容器被绝对地移动到另一个容器上（这让我怀疑它是否可能！）。如果是这样，我会喜欢罗林。

终极目标：想在另一个具有不同的z索引来覆盖一个相邻的柔性容器。

在此先感谢。

来源

2017-01-05 Robert Bepko

*的Flex项目*绝对定位将忽略弯曲特性。具有绝对定位的* flex容器*很好。当然，除非这个容器也是一个物品。你应该发布你的代码，以便我们可以重现这个问题。 –

创建父项作为绝对元素。它的孩子具有柔性属性。或者只是有相对定位和用于覆盖容器 –

相对定位适用的z-index用z-index就像一个魅力（现在有两种方法）-Thanks –

由于我们不知道您的原始代码是什么样子，因此这里是一个总体布局，其中一个柔性容器被绝对定位在另一个之上。

为了使position: absolute元素排列为兄弟姐妹，我包他们俩，并给第二width: 100%

.wrap { 
 
    position: relative; 
 
} 
 
.a, .b { 
 
    display: flex; 
 
    height: 120px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.a { 
 
    background: red; 
 
} 
 
.b { 
 
    position: absolute; 
 
    top: 50px; 
 
    height: 50px; 
 
    width: 100%; 
 
    background: blue; 
 
} 
 
.wrap > div > div { 
 
    flex: 1; 
 
    padding: 20px 50px; 
 
    margin: 5px; 
 
    background: green; 
 
} 
 
.wrap div div:first-child { 
 
    flex-basis: 50%; 
 
}

<div class="wrap"> 
 
    <div class="a"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 

 
    <div class="b"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</div>

来源

2017-01-06 06:07:42 LGSon

上面的代码工作非常适合我尝试的方案。你能告诉我新来flex吗？（;感谢 –

@RobertBepko'flexbox'是容易的，复杂的，所以如何分辨是不是有点直接答复这篇文章，[一个完整的指南了flexbox（https://css-tricks.com/snippets/css/一个引导到实现Flexbox /），是不错的。读它，然后又看了一遍，静静的，当你认为你知道，有些东西出来作为你曾经认为不行为。 – LGSon

感谢。这Flexbox的页面事后看来，我缺少的部分是上面阐明的flex基础和宽度属性，没有它，我选择b显示时，我的项目中的行会缩小：absolute（在这种情况下为b）。最好！ –

可柔性盒容器定位绝对

回答

相关问题