html - 在 div 的另一侧覆盖一个 div

Question

我想并排放置两个 div，但像这样重叠。我将此部分放在我的网页中间，因此在绝对定位后我无法使用顶部或底部的 css 样式。

div.promoBanner__container {
  padding-top: 15px;
}

.promoBanner__image {
  position: absolute;
  background-size: cover;
  height: 100%;
  background-position: 50%;
  width: 76.25%;
}

div.promoBanner__content {
  background-color: rgba(17, 24, 54, .95);
}

div.promoBanner__content {
  position: absolute;
  left: 42%;
  right: 0;
  overflow-y: hidden;
  margin: 0;
  padding: 34px 22px;
}

<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
        alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>

  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

这是问题的额外编辑部分:

当这两个 div 达到 800 像素以下时，我想像下面这样放置它们。 我试图实现这个设计但无法实现。请帮忙。

Answer 1

要实现您包含的图像中显示的设计，您可以遵循以下几点:

• 将 position: relative 规则添加到 .promoBanner__container。
• 从 .promoBanner__image 中删除 position: absolute 规则，因为您会破坏您的设计，因为 .promoBanner__container 的高度将仅是其高度填充为 absolute 定位从文档流中删除元素，因此 .promoBanner__container 中包含的图像的 height 不会添加到 .promoBanner__container。这样做我们将能够使 .promoBanner__content 元素垂直居中。
• 借助 top 和 transform 属性将 .promoBanner__content 垂直居中。

下一个片段将解释更多如何完成任务:

* {
  box-sizing: border-box; /** padding and border are included in the width and height preventing some overflow cases (not all !) **/
}


.promoBanner__container {
  position: relative; /** add this so his children with absolute positionning are placed relative to it **/
  width: 100%;
  padding: 15px;
}

.promoBanner__image {
  /** removed absolute position **/
  height: 100%;
  width: 76.25%;
}

/** new rules for the image itself **/
.promoBanner__image > img {
  height: 100%;
  width: 100%;
}

.promoBanner__content {
  min-width: 400px;
  max-width: 45%; 
  /** change the above rules to your desired values. If no max-width is applyied, the element will have 100% of its parent's width **/
  position: absolute;
  right: 0; /** the right property is used to prevent overflowing and to position the banner content in the desired place without any hacky calculations **/
  /** next two rules are used to vertically align the banner content **/
  top: 50%;  
  transform: translate3d(0, -50%, 0);
  overflow-y: hidden;
  padding: 34px 22px;
  background-color: rgba(17, 24, 54, 0.95);
  z-index: 2; /** ensure it's on top **/
}

<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
        alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>

  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

编辑:

根据 OP 在他的帖子中添加的内容，以下是当 width 小于或等于 800px 时如何进行设计缩放:

• 这就是 CSS 媒体查询 发挥作用的地方。
• 你必须重新设置一些规则才能完成你想要的任务。

下一个片段包含带有 800px 断点规则的编辑版本:

* {
  box-sizing: border-box; /** padding and border are included in the width and height preventing some overflow cases (not all !) **/
}

.promoBanner__container {
  position: relative; /** add this so his children with absolute positionning are placed relative to it **/
  width: 100%;
  padding: 15px;
}

.promoBanner__image {
  /** removed absolute position **/
  height: 100%;
  width: 76.25%;
}


/** new rules for the image itself **/

.promoBanner__image>img {
  height: 100%;
  width: 100%;
}

.promoBanner__content {
  min-width: 400px;
  max-width: 45%;  /** change the above rules to your desired values. If no max-width is applyied, the element will have 100% of its parent's width **/
  position: absolute;
  right: 0; /** the right property is used to prevent overflowing and to position the banner content in the desired place without any hacky calculations **/
  /** next two rules are used to vertically align the banner content **/
  top: 50%;
  transform: translate3d(0, -50%, 0);
  overflow-y: hidden;
  padding: 34px 22px;
  background-color: rgba(17, 24, 54, 0.95);
  z-index: 2; /** ensure it's on top **/
}

/**
* rules to be applied when the width is less or equal to 800px. Change this per your requirements.
* some rules have to be reset in order to achieve your task.
* resize the screen to see the changes. It's better to copy the demo in a seperate file as the StackOverflow runnable snippet sandbox may not allow you to resize it.
**/

@media screen and (max-width: 800px) {
  .promoBanner__image {
    width: 100%;  /** resetting the width to 100% **/
  }
  .promoBanner__content {
    min-width: 100%;
    width: 100%; 
    /** resetting the width related rules to 100% so the two sections have the same width **/
    position: relative;  /** resetting the position rule to relative so the section remains in the document flow and we're still able to use top, bottom, right and left rules **/
    top: -45px; /** moving the section a little bit to the top. Change this per your requirements **/
    transform: translate3d(0, 0, 0); /** ressetting the transform rule **/
    overflow-y: hidden;
    padding: 34px 22px;
    background-color: rgba(17, 24, 54, 0.95);
    z-index: 2; /** ensure it's on top **/
  }
}

<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
            alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>
  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

learn more about the CSS media queries.

希望我能进一步插入你。