html – 在flexbox中绝对定位

概述我有一个flex容器(蓝色方块)，具有以下属性： display: flex;justify-content: center;align-items: center;flex-wrap: nowrap; 因此，它的孩子(浅蓝色方块)安排自己，如下所示。但是，我想从正常流程中添加另一个孩子(绿色方块)，并将其相对于其父项定位。如下所示，我最好写一些底部的东西：20px;和边际：汽车。 我试图用 我有一个flex容器(蓝色方块)，具有以下属性：

display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;

因此，它的孩子(浅蓝色方块)安排自己，如下所示。但是，我想从正常流程中添加另一个孩子(绿色方块)，并将其相对于其父项定位。如下所示，我最好写一些底部的东西：20px;和边际：汽车。

我试图用z-index玩耍没有用。我该怎么办？我应该创建另一个父元素吗？

解决方法 以下是实现此布局的三个选项：

方法#1：CSS定位属性

应用位置：相对于flex容器。

应用位置：绝对到绿色的flex项目。

现在绿色的正方形绝对位于柔性容器内。

更具体地说，绿色正方形从文档流中移除，但保持在nearest positioned ancestor的范围内。

使用CSS偏移属性顶部，底部，左侧和右侧移动绿色方块。

flex-container {  display: flex;  justify-content: center;  align-items: center;  flex-wrap: nowrap;  position: relative;  border: 4px solID blue;  height: 300px;  wIDth: 300px;}flex-container > flex-item:first-child {  display: flex;}flex-container > flex-item:first-child > flex-item {  border: 4px solID aqua;  height: 50px;  wIDth: 50px;  margin: 0 5px;}flex-container > flex-item:last-child {  position: absolute;  bottom: 40px;  left: 50%;  transform: translateX(-50%); /* fine tune horizontal centering */  border: 4px solID chartreuse;  height: 50px;  wIDth: 50px;}

<flex-container>    <flex-item><!-- also flex container -->	    <flex-item></flex-item>	    <flex-item></flex-item>	    <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

这种方法的一个注意事项是，某些浏览器可能无法从正常流程中完全删除绝对定位的flex项目。这将以非标准，意想不到的方式更改对齐方式。更多细节：Absolutely positioned flex item not being removed from normal flow in Firefox

方法#2：Flex auto margins&隐形Flex项目(DOM元素)

结合auto margins和新的无形d性项目，可以实现布局。

新的flex项目与底部项目相同，并放置在相对端(顶部)。

更具体地说，由于柔性对准是基于自由空间的分布，所以新的项目是保持三个蓝框垂直居中的必要的平衡。新项目必须与现有绿色项目的高度相同，否则蓝色框将不会精确居中。

新项目从视图中删除，具有可见性：hIDden。

简而言之：

>创建一个绿色框的副本。
>将其放在列表的开头。
>使用flex自动边距来保持蓝色框居中，两个绿色框都从两端创建相等的平衡。
>应用可见性：隐藏到重复的绿色框。

flex-container {    display: flex;    flex-direction: column;    align-items: center;    border: 4px solID blue;    height: 300px;    wIDth: 300px;}flex-container > flex-item:first-child {    margin-top: auto;    visibility: hIDden;}flex-container > flex-item:nth-child(2) {    margin-top: auto;    display: flex;}flex-container > flex-item:last-child {    margin-top: auto;    margin-bottom: auto;}flex-container > flex-item:first-child,flex-container > flex-item:last-child {    border: 4px solID chartreuse;    height: 50px;    wIDth: 50px;}flex-container > flex-item:nth-child(2) > flex-item {    border: 4px solID aqua;    height: 50px;    wIDth: 50px;    margin: 0 5px;}

<flex-container>    <flex-item></flex-item>    <flex-item><!-- also flex container -->	    <flex-item></flex-item>	    <flex-item></flex-item>	    <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

方法3：Flex auto margins&隐形Flex项(伪元素)

这个方法与#2类似，除了它在语义上更清晰，而且必须知道绿色框的高度。

>创建与现有绿色框相同高度的伪元素。
>将其放在容器的开始处，并带有:: before。
>使用flex自动边距来保持蓝色框居中，绿色伪元素和DOM元素从两端创建相等的平衡。

flex-container {    display: flex;    flex-direction: column;    align-items: center;    border: 4px solID blue;    height: 300px;    wIDth: 300px;}flex-container::before {  content: "";  margin-top: auto;  height: calc(50px + 8px);  /* height + borders */  visibility: hIDden;}flex-container > flex-item:first-child {  margin-top: auto;  display: flex;}flex-container > flex-item:last-child {  margin-top: auto;  margin-bottom: auto;  border: 4px solID chartreuse;  height: 50px;  wIDth: 50px;}flex-container > flex-item:first-child > flex-item {  border: 4px solID aqua;  height: 50px;  wIDth: 50px;  margin: 0 5px;}

<flex-container>    <flex-item><!-- also flex container -->        <flex-item></flex-item>	    <flex-item></flex-item>	    <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

补充笔记：

>与Flex容器的交叉轴不同，Flex容器具有用于定位各个柔性物品的对齐自身属性，there is no similar property,such as justify-self,for the main axis。
>如上所述，解决方案是使用绝对定位或flex auto margins来对齐主轴中的各个柔性物品。>由于通过在容器中分配可用空间来实现FlexBox对齐，因此可以插入不可见的flex项目以创建相等的平衡。>这些“幻影”项目的长度与要平衡的元素的长度完全相同很重要。否则，不会有平等的平衡，中间的项目不会完全中心。

总结

以上是内存溢出为你收集整理的html – 在flexbox中绝对定位全部内容，希望文章能够帮你解决html – 在flexbox中绝对定位所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。