Question

我正在研究一个项目，我对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

http://codepen.io/alb_dev/pen/KaxMVv

我已经输入了codepen，你可以看到我遇到的问题：

粉红色的div我想把div放在有文字和按钮元素的div上 i want to put the file like this on the photo

但当我把粉红色放入： -

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

和div父母： -

position:relative

粉红色的div消失，你可以在我发布的codepen上看到。

希望我已经解释好我的问题，如果没有请告诉我！

Answer 1

使用position: fixed代替position:absolute

Answer 2

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

HTML 旧

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

<强> HTML 新

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

CSS 旧

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

CSS 新

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

Div元素来自div父母？

2 个答案: