如何覆盖 wordpress 上的 css 以显示全宽 div？答案

【问题标题】：How can I overwrite css on wordpress to display a full width div?如何覆盖 wordpress 上的 css 以显示全宽 div？
【发布时间】：2018-04-24 11:51:33
【问题描述】：

我正在使用带有自定义模板的 wordpress，我想显示一个窗口宽度的 div。这是我的html代码：

<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
    <div class="blacklayer"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Title Text</h2>
                    <p>Test Text</p>
                </div>
                <div class="col-md-12 text-center">
                <a href="#" class="btn btn-danger btn-lg btn-primary">Download</a>
                </div>
             </div>
        </div>
</section>

这是我的css代码：

.calltoaction {
  background-position: unset !important;
    position: absolute;
    left: 0;
    right: 0;
        background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
      background-size: cover;
    padding: 80px 0 90px 0;
}

问题是，我创建的所有东西都放在这个 div 类中：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

所以我正在尝试编写自定义 css 来创建一个显示在此类顶部的 div，因为我无法直接访问模板的代码。

目前the result is this。我希望该图像适合页面的宽度。

任何帮助将不胜感激。

【问题讨论】：

How to overlay one div over another div的可能重复
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。
您尚未设置 z-index - 请阅读：developer.mozilla.org/en-US/docs/Web/CSS/z-index
虽然相关 - stackoverflow.com/questions/28565976/…

标签： html css wordpress

【解决方案1】：

请参阅附加的代码-sn-p，了解如何将 div 堆叠在一起，假设一个 div 具有设置： position: absolute; .我稍微移动了最低的 div，使其可见。

.div-1 {
  position: absolute;
  z-index: 1;
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 10px 0px 0px 10px;
}

.div-2 {
  position: relative;
  z-index: 2;
  background-color: green;
  height: 100px;
  width: 100px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="index.css">
  <body>

<div class="div-1"></div>
<div class="div-2"></div>

  </body>
</html>

【讨论】：