在flex容器中使用position:relative

Question

我正在预览帖子,如文本和图像作为背景与一些过滤器.

问题是我想要整个div不是1300px,而只是650px.

但是,这种方式我将无法使用,display: flex并且不会使用与文本div相同的高度img.

有没有办法只用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)设置为大小*2时,因为另一种方式,子元素的大小将自动减少.

Answer 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

笔记:

1. 主容器宽度从1300px变为650px
2. 使主要容器成为儿童绝对定位的边界框(最近的祖先)
3. 图像被取出流动并占据父div的全宽和高度