Html Div元素是否从Div父级中带出？

我在做一个项目，我和部门没什么问题， 情况如下：-

section.portfolio
  .flex.flex--center
    .col-1
      .img-strip
    .col-1.order-first
      p.home-lead.outdented Lore ipsum 
      a(href="#").home-cta See More

我已经输入了代码笔，您可以看到我的问题：

我想放在有文本和按钮元素的div旁边的粉红色div

但当我把div换成粉红色时：-

.img-strip
    position: absolute
        background:pink
        top: 0
        margin: -50px 0
        width: 100%
        height:100%

以及中的div父级：-

position:relative

粉红色的div消失了，你可以在codepen上看到我的帖子

希望我已经解释好我的问题，如果没有请让我知道

---

使用

position:fixed

代替

position:absolute

代码的结构存在一些基本问题。由于您已经使用所推荐的方法建立了网格系统，因此不建议您这样做。根据我对你问题的理解，以下是解决方案

HTMLold

CSS新建

---

我的立场是：固定不变，只有div变大显示草图，你在找什么？看我贴的图片这是我给你的最好答案。如果您不知道html、css是如何工作的（位置、浮动、流体设计）。对于这个问题，我请求帮助，因为我不明白为什么这个职位会这样

<div class="col-1">
    <div class="img-strip"></div>
</div>

<div class="col-1 img-strip">

section.portfolio .img-strip {
  position: absolute;
  background: pink;
  top: 0;
  margin: -50px 0;
  width: 100%;
  height: calc(100% + 100px);
}

section.portfolio .img-strip {
    background: pink;
    width: 320px; /* Depending on what width you want col-1 has a maximum width if 320px */
    height: 200px;
}