html - 如何在html中将一张卡放置得比它的邻居高一点

Question

我试图将一张卡片放置在其相邻列上方一点的位置。这是这些卡片放置的图像:

这是我的 html:

<div class="row">

                    <div class="col span-1-of-2 service-cards card-set">

                        <div class="card first-card">
                            <div class="container">
                                <img src="resources/img/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4e594f485d494e5d52481150555b54487c0e44124c525b" rel="noreferrer noopener nofollow">[email protected]</a>" class="icon-small">
                                <h4><b>UI/UX & mobile <br>application</b></h4> 
                                <p class="subtitle-paragraph service-para-1">We are the finest digital solution providers in town with high quality service.</p> 
                            </div>
                        </div>

                        <div class="card">
                            <div class="container">
                                <img src="resources/img/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbdaabcbbaebabdaea1bbe2a3a6a8a7bb8ffdb7e1bfa1a8" rel="noreferrer noopener nofollow">[email protected]</a>" class="icon-small">
                                <h4><b>Branding & <br>Corporate identity</b></h4> 
                                <p class="subtitle-paragraph service-para">We are the finest digital solution providers in town with high quality service.</p> 
                            </div>
                        </div>

                    </div>

                </div>

Answer 1

您可以使用相对位置将一张卡放置在略低于另一张卡的位置

.container {
  display: flex;
  justify-content: center;
}

.card {
  height: 170px;
  width: 100px;
  border: 1px solid;
  position: relative;
  margin: 0 5px;
}

.first-card {
  top: 10px;
}

<div class="container">
    <div class="card first-card"></div>
    <div class="card"></div>
</div>