Flexbox中的绝对定位 [英] Absolute positioning in flexbox

问题描述

我有一个flex容器（蓝色正方形），具有以下属性：

I have a flex container (the blue square) with the following properties:

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

因此，它的孩子（浅蓝色方块）但是，我想添加另一个孩子（绿色方块）的正常流和相对于其父的位置。为了定位它，如下所示，我最好写下 bottom：20px; 和 margin：auto; 。

Therefore, its children (the light blue squares) arrange themselves as you see below. However, I'd like to add another child (the green square) out of the normal flow and position it relative to its parent. To position it as you see below, I'd ideally write something like bottom: 20px; and margin: auto;.

我试图用 z -index 无效。我应该如何处理？

I tried to play around with z-index to no avail. How should I approach this? Should I resort to creating another parent element?

推荐答案

以下是实现此布局的三个选项：

Here are three options for achieving this layout:

将位置：相对

将位置：绝对应用于绿色flex项目。

Apply position: absolute to the green flex item.

现在绿色方块是绝对定位在flex容器内。

Now the green square is absolutely positioned within the flex container.

更具体地说，绿色方块从文档流中移除，但保持在 最接近的已定位祖先 。

More specifically, the green square is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

使用CSS偏移属性顶部，底部， left 和 right 移动绿色方形。

Use the CSS offset properties top, bottom, left and right to move the green square around.

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项目。这将以非标准，意想不到的方式更改对齐方式。更多详细信息： 绝对定位的Flex项目未从Firefox的正常流程中删除

One caveat to this method is that some browsers may not completely remove an absolutely-positioned flex item from the normal flow. This changes the alignment in a non-standard, unexpected way. More details: Absolutely positioned flex item not being removed from normal flow in Firefox

结合使用 auto 边距和一个新的，不可见的flex项目。

With a combination of auto margins and a new, invisible flex item the layout can be achieved.

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

The new flex item is identical to the bottom item and is placed at the opposite end (the top).

更具体地说，因为flex对齐是基于free空间，新项目是必要的平衡，以保持三个蓝色框垂直居中。

More specifically, because flex alignment is based on the distribution of free space, the new item is a necessary counterbalance to keep the three blue boxes vertically centered. The new item must be the same height as the existing green item, or the blue boxes won't be precisely centered.

新项目必须与现有绿色项目的高度相同，否则蓝色方框不会正确居中。<$> c $ c> visibility：hidden 。

The new item is removed from view with visibility: hidden.

简而言之：

• 创建一个绿色框的副本。


• 将它放在列表的开头。


• 使用flex <$ c $


• 应用 visibility：hidden 到重复的绿色框。

• Create a duplicate of the green box.
• Place it at the beginning of the list.
• Use flex auto margins to keep the blue boxes centered, with both green boxes creating equal balance from both ends.
• Apply visibility: hidden to the duplicate green box.

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>

此方法类似于＃2，除了它在语义上更清晰，绿色框的高度必须是已知的。

This method is similar to #2, except it's cleaner semantically and the height of the green box must be known.

• 创建与现有绿色框相同高度的伪元素。


• 将其放置在 :: before 之前的容器。


• 使用flex auto 蓝色框居中，绿色伪元素和DOM元素从两端创建相等的平衡。

• Create a pseudo-element with the same height as the existing green box.
• Place it at the start of the container with ::before.
• Use flex auto margins to keep the blue boxes centered, with the green pseudo and DOM elements creating equal balance from both ends.

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项目的 align-self 属性，没有类似的属性，例如 justify-self ，用于主轴 。


• 如上所述，解决方案是使用绝对定位或 flex auto 边距，以便在主轴中对齐各个flex项目。


• 对齐通过在容器中分配可用空间来工作，可以插入不可见的flex项目以创建相等的平衡。


• 这些幻影项目的长度必须完全相同作为它们意味着平衡的元素。否则，将不会有平衡余额，中间项将不会完全居中。

• Unlike the cross axis of a flex container, which has the align-self property for positioning individual flex items, there is no similar property, such as justify-self, for the main axis.
• As described above, the solution is to use absolute positioning or flex auto margins to align individual flex items in the main axis.
• Since flexbox alignment works by distributing free space in the container, invisible flex items can be inserted to create equal balance.
• It's important that these "phantom" items be exactly the same length as the element they are meant to balance out. Otherwise, there won't be equal balance and the middle items will not be perfectly centered.

这篇关于Flexbox中的绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！