在div的另一侧覆盖一个div

时间：2019-07-12 18:12:09

标签： html css

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

enter image description here 

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>

这是问题的附加编辑部分：

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

4 个答案:

答案 0 :(得分：3)

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

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

下一个代码段将解释如何完成任务：

* {
  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>

  

详细了解CSS media queries。

希望我进一步推动了你。

答案 1 :(得分：1)

margin-top: 35px !important;将完成工作

答案 2 :(得分：1)

如果margin-left和margin-right仍然是可行的样式，则可以与z-index一起使用。用z-index这样的低z-index: 5;来设置要放在后面的元素，用z-index: 1005;或其他一些随机的大数来设置要放在前面的元素

答案 3 :(得分：1)

对于容器：

  1. 我会将position: relative;放在父容器上。

对于图片：

  1. background-size和background-position在没有background-image的情况下什么也不做。我将<img>标签从HTML移到CSS。
  2. 我将用固定高度替换height: 100%;。
  3. 我不会将其定位为绝对。
  4. 因为您使用的是col-md-8（假设您使用的是Bootstrap），所以width属性不是必需的

对于内容：

  1. 您不想同时使用left和right。选一个。
    2. 除非您设置了固定的高度，否则不需要
  2. overflow-y: hidden;。

Check out this Codepen，然后告诉我您是否正在寻找。您可以注释掉边框并使用内容的top和left属性。

相关问题
最新问题