定位和包装元素所需的CSS帮助

我目前正在使用jquerymobile构建一个移动应用程序，但由于对CSS缺乏了解，因此遇到了麻烦

我需要一点帮助来设计原型的中间部分，我假设它由多个div组成，它们通过使用相对和绝对定位相互重叠

我应该先用一个包装纸来包装唐纳德·特朗普的形象，然后再介绍其他div来定位这个形象吗？在所有div就绪后，我是否将它们分组，以便它们在任何移动设备上都具有一致的外观？如果是，如何进行？如果有人能用CSS代码解释如何实现原型中显示的样式，我将不胜感激

---

当然，有几种方法可以实现您的目标外观。这是一种可能性，它利用了：

• 对节（如
  ，
  等）使用特定的html标记，而不是鼓励使用通用div

• 方便的

  ：：after

  css选择器，它允许您通过编程直接从css向现有元素添加内容。在这种情况下，黑色正方形

• 具有

  位置的元素的相对位置：相对
  。这允许您相对于其“正常”位置向上移动文章部分，使其与图像重叠
  

• 宽度定义为百分比，

  宽度：90%

  ，确保与图像重叠的文章始终略薄，以实现所需的外观

• translate

  css属性，允许您将黑色正方形移动其自身宽度的50%，使其完全居中（如果没有translate属性，黑色正方形的左侧将居中，而不是正方形的中心居中）

我鼓励您使用下面的示例来了解每个css规则对布局的影响

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
最大宽度：500px；
保证金：自动；
文本对齐：居中；
背景：白色；
}
.形象{
边缘顶部：10px；
背景：url（'https://fortunedotcom.files.wordpress.com/2017/01/trump2_thumb.jpg’）上止点不重复；
背景尺寸：封面；
最小高度：250px；
}
.图像重叠{
边框顶部：5px纯红；
填充顶部：40px；
位置：相对位置；
顶部：-40px；
宽度：90%；
保证金：0自动；
背景：白色；
}
.图像重叠：之后{
内容：“1”；
背景：黑色；
位置：绝对位置；
颜色：白色；
宽度：50px；
高度：50px；
排名：0；
左：50%；
转换：翻译（-50%，-50%）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

头条新闻
来自邪恶世界
#美国



第三次世界大战是如何在昨晚发生的

是否需要此帮助？谢谢你的帮助。使用：after-css选择器，现在我可以为代码带来更多的一致性和可读性。这里还有几个问题。在图像类中添加这样一个代码：position:relative；，是否没有必要；？在开始时将“框大小”设置为“边框框”有什么好处？在本例中，您不需要添加相对于图像类的“位置”：因为您不会使用它相对于图像现在所在的位置移动图像。至于设置框大小，这只是定义如何考虑边框和填充值的决定。这里没有必要使用边框框，这更多是一个偏好问题。您可以在此处阅读更多信息：