在 flex 容器内使用 position: relative

Posted 2023-03-05

【中文标题】在 flex 容器内使用 position: relative

【英文标题】：Using position: relative inside a flex container

【发布时间】：2017-01-11 09:13:02

【问题描述】：

我正在预览帖子，例如它的文本和图像作为带有一些过滤器的背景。

问题是我想要整个 div 不是1300px，而是只有650px。

但是，这样我将无法使用display: flex，并且不会让带有img的div与带有文本的div具有相同的高度。

有没有办法只用css（没有js）来解决这个问题？

这里是代码：http://codepen.io/anon/pen/RGwOgN?editors=1111

.post 
  width: 650px;
  padding: 25px 25px;
  z-index: 10;
  position: relative;
  color: white;

.flex-row 
  display: flex;
  width: 1300px; /* here is a problem */

.back-img 
  width: 650px;
  background-size: cover;
  position: relative;
  z-index: 0;
  left: -650px;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  overflow: hidden;

<div class="flex-row">
  <div class="post">
    <h1>Lorem ipsum</h1>
    <h2>text here</h2>
    <p class="lead">text hete</p>
  </div>
  <div class="back-img" style="background-image: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),url(http://unsplash.com/photos/g-AklIvI1aI/download)">
    <div></div>
  </div>
</div>

如您所见，它可以正常工作，但前提是父元素 (flex-row) 设置为 size*2，因为另一种方式会自动减小子元素的大小。

【参考方案1】：

相对定位使元素保持正常流动。这意味着在您定位它们之后，它们的原始位置仍在占用空间。

绝对定位从正常流中移除元素。这些元素不占用空间，因此可以在不影响周围布局的情况下对齐。

这应该适合你：

.flex-row 
  display: flex;
  width: 650px;                       /* 1 */
  position: relative;                 /* 2 */

.post 
  width: 100%;
  padding: 25px 25px;
  z-index: 10;
  color: white;

.back-img 
  position: absolute;                 /* 3 */
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: 0;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  overflow: hidden;

<div class="flex-row">
  <div class="post">
    <h1>Lorem ipsum dolor</h1>
    <h2>Lorem ipsum dolor sit amet, cu melius feugiat delenit mei. Sea cu tale etiam definitiones. An pro scribentur omittantur, ei sea utinam hendrerit. Has ad dico illud fierent. Vis tale modus ridens te.

Vix viris zril forensibus eu, dolor expetendis dissentiunt duo in. Vis id ludus theophrastus. Debitis tibique necessitatibus quo ea. At movet bonorum intellegat eos. Nec ne ubique erroribus. Rebum accusata est ad.</h2>
    <p class="lead">post.summary</p>
  </div>
  <div class="back-img" style="background-image: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),url(http://unsplash.com/photos/g-AklIvI1aI/download)">
    <div></div>
  </div>
</div>

http://codepen.io/anon/pen/XjWQxo

注意事项：

主容器宽度从 1300 像素更改为 650 像素 make primary container the bounding box (nearest positioned ancestor) for absolute positioning of children 图片不流畅，占据了父 div 的全宽和全高