如何将 div 定位在其他 div 之外？

Question

我正在尝试将带有图像的 div 放置在我的主要卡片组件之外。我试过使用 margin-bottom，但是没有用。如何使用 CSS styled-component 来完成？

我将在此处附上我正在努力实现的设计的图片：] https://imgur.com/a/EUHq4eE

卡片组件：

function CardComponent(props) {
  return (
    <>
      <Card>
        <CardImage>{props.img}</CardImage>
        <CardName>{props.name}</CardName>
        <Description>{props.description}</Description>
        <Links>
          <Button>{props.livePreview}</Button>
          <Button>{props.github}</Button>
        </Links>
      </Card>
    </>
  );
}

export default CardComponent;

样式化组件

import styled from "styled-components";

export const Card = styled.div`
  width: 25%;
  height: 70vh;
  border: 1px dotted black;
  margin-top: 5%;

  @media (max-width: 768px) {
    width: 100%;
  }
`;

export const CardImage = styled.div`
  border: 1px solid pink;
  width: 80%;
  height: 50vh;
  margin: auto;
`;

export const CardName = styled.div`
  border: 1px solid black;
  text-align: center;
`;

export const Description = styled.div`
  text-align: center;
`;

export const Links = styled.div`
  display: flex;
  border: 1px solid pink;
  justify-content: center;
`;

export const Button = styled.div`
  border: 1px solid blue;
`;

Answer 1

position:absolute;
top: -50;

像这样的东西应该可以工作，你应该使用绝对位置，因为元素相互重叠并且给出边距、填充等将不起作用，因为它们不应该是重叠元素。

Answer 2

您可以使用 position: absolute 或 margin-top 来实现它。检查附加的代码段：

section {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
  display: inline-block;
  max-width: 300px;
  margin-top: 50px;
}

img {
  max-width: 80%;
  margin-top: -30px;
}

<section>
  <img src="https://media1.popsugar-assets.com/files/thumbor/_Rrjw5u5qeqlO8Zznc0TskZB_8k/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2018/04/30/868/n/1922283/1f2e59ed5ae773b06f2879.82877284_/i/Does-Iron-Man-Die-Avengers-Infinity-War.jpg" />
  <h4>Hello world</h4>
</section>

如何将 div 定位在其他 div 之外？

How to position a div outside other div?

css

reactjs

styled-components