向下移动卡及其内容

Question

I have been able to make an image protrude the top half of a card，但是图像与文本和其他图像重叠。如何将卡向下推到上半部包含图像的下半部而下半部包含其他文本，图像等的地方？

这是我的CSS：

.card {
  margin-left: 30px;
  margin-right: 30px;
  width: auto;
  border-radius: 8px;
  position: relative;
  display: block;
  margin-top: 100px;
  overflow: visible;

  div {
    position: absolute;
    top: -95px;
    width: 100%;
    text-align: center;
  }


  img:not(.castImg) {
    width: 80%;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    display: block;
    margin: -100px auto 0;
  }
}

我正在尝试模仿这种设计：

Answer 1

您必须创建足够的空间，以使这些元素在重叠时可以彼此叠置。

我个人将图像和卡片包装在div中，这样您就可以根据需要放置它们，并在每个卡片之间留一个空白。但这将根据您的代码起作用。

尝试一下：

    return Object.assign({}, state, {
        [action.componentDescriptor.name]: objectAssign({}, state[action.componentDescriptor.name], {
            [action.id]: objectAssign({}, state[action.componentDescriptor.name][action.id], {
                Value: action.value
            })
        })
    });