如何在不使用负边距的情况下实现这种突出的图像布局？
如何在不使用负边距的情况下实现这种突出的图像布局？
提问于 2021-08-05 22:32:28
这是布局图像：
正如您在图像中看到的，手机的图像正从蓝色容器中伸出。
我尝试了几种方法，例如：
我尝试使用一个有5行的网格，其中一个<div>标签扩展了所有行，并将其背景设置为手机图像。然后，我将蓝色背景框设置为只使用表格2-4的行。
不知何故，这确实起到了作用，但当浏览器窗口调整大小时，图像开始收缩，并以一种时髦的方式定位。
作为CSS的新手，我希望避免负边距，因为我读到过它们是“邪恶的”。
有没有办法以一种干净/非破解的方式来实现这一点？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-06 02:00:44
您可以使用transform属性将图像移动到需要的位置。
您需要像往常一样构建您的布局，但不能将图像提升/降低到其默认位置之外。
完成此操作后，您可以使用transform: translateY(-100px)将图像提升或降低到目标位置。
这方面的一个快速示例可以使用<div>标记来显示：
/* Setup some basic layouts to mimic the layout required */
.container {
padding-top: 100px;
padding-bottom: 100px;
}
.banner {
height: 200px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
.image-1 {
height: 200px;
width: 200px;
background: red;
transform: translateY(-50px); /* move the image up */
}
.image-2 {
height: 200px;
width: 200px;
background: green;
transform: translateY(50px); /* move the image down */
}
.example-filler {
}<div class="container">
<div class="banner">
<div class="image-1"></div>
<div class="image-2"></div>
<div class="example-filler">Lorem ipsum</div>
</div>
</div>
Stack Overflow用户
发布于 2021-08-06 01:20:52
如果你不想使用负边距(在这种情况下是可以的)。您可以尝试将这些样式赋予您的图像。
img {
position: relative;
top: -100px;
}你可以学习more about the "position" property here。对于初学者来说，理解它的工作原理是非常重要的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68674190
复制相关文章
相似问题
腾讯云开发者
