CSS 需要有关定位和环绕元素的帮助

Question

我目前正在使用 jQuery Mobile 构建移动应用程序，但由于缺乏对 CSS 的理解而碰壁。

我需要一些关于原型中间部分样式的帮助，我认为它由多个 div 组成，它们通过使用相对和绝对定位相互重叠。

我是否应该从一个包含唐纳德特朗普图像的包装器开始，然后引入其他 div 来定位图像？在所有 div 就位后，我是否将它们组合在一起，以便它们在任何移动设备上具有一致的外观？如果是，如何？如果有人可以用 CSS 代码解释如何实现原型中显示的样式，我将不胜感激。

Answer 1

当然，有多种选择可以实现您想要的特定外观。这是一种可能性，它利用了：

对部分使用特定的 html 标签（例如 <article>、<header> 等），而不是鼓励使用通用 div。
方便的 ::after css 选择器，它允许您以编程方式将某些内容直接从 css 附加到现有元素。在这种情况下，黑色方块。
与position: relative元素的相对定位。这允许您将文章部分相对于其 "normal" 位置向上移动，使其与图像重叠。
宽度定义为百分比，width: 90%，确保与图像重叠的文章始终稍微薄一些，以达到所需的外观。
translate css 属性，它允许您将黑色方块移动其自身宽度的 50%，因此它完全居中（没有translate 属性，黑色方块的左侧将居中，而不是正方形的中心居中）。

我鼓励您尝试下面的示例，以了解每个 css 规则对布局的影响。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  max-width: 500px;
  margin: auto;
  text-align: center;
  background: white;
}
.image {
  margin-top: 10px;
  background: url('https://fortunedotcom.files.wordpress.com/2017/01/trump2_thumb.jpg') top center no-repeat;
  background-size: cover;
  min-height: 250px;
}
.image_overlap {
  border-top: 5px solid red;
  padding-top: 40px;
  position: relative;
  top: -40px;
  width: 90%;
  margin: 0 auto;
  background: white;
}
.image_overlap:after {
  content: '1';
  background: black;
  position: absolute;
  color: white;
  width: 50px;
  height: 50px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

<header>
  <h1>Top Stories</h1>
  <h2>from the world of evil</h2>
</header>

<main>
  <div class="image"></div>
  <article class="image_overlap">
    <p>#AMERICA</p>
    <br>
    <h3>How the WWIII <br>Took Place Last Night</h3>
  </article>
</main>

CSS 需要有关定位和环绕元素的帮助

CSS Help Needed with Positioning and Wrapping Elements

css

position

wrapper