使用负边距时内容隐藏

Question

我在标签上使用负边距，但没有显示。 我必须在蓝色背景上放置一个搜索框。如果我使用负边距，则该框不会显示在蓝色背景上。

这是屏幕截图：

我的代码是：

 <div class="row">
 <div class="bg">
 <div class="col-lg-8">
 <h5> Title</h5>
 </div>
 </div>
 </div>
<div class="row">
<div class="col-sm-12 col-md-6">
</div><div class="col-sm-12 col-md-6">
<div id="ParentCaseList_filter" class="dataTables_filter">
<label>Search:<input type="search" class="form-control form-control-sm" 
placeholder="" aria-controls="ParentCaseList"></label>
</div>
</div>
</div>

CSS：

  .bg{
   border-color: #428bca;
   }
  #ParentCaseList_filter {
  margin-top: -43px;
  }
  div.dataTables_filter {
  text-align: right;
  }
  .dataTables_filter label {
  display: inline-flex !important;
  margin-top: 0rem !important;
  }
  div.dataTables_wrapper div.dataTables_filter label {
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
  }

Answer 1

为了真正理解您的问题，我们需要更多代码。我们将需要受影响的HTML代码以及可能与您的问题有关的任何其他相关CSS。

无论如何，使用CSS属性z-index会产生“ hack” 。

尝试以下操作（假设边距为您提供了所需的元素位置）：

{margin-top:-43px; z-index: 999999 !important;}

以下对我来说很好：

<style>
    .bg .col-lg-8{
        border-color: #428bca;
        background-color: #428bca;
    }
    #ParentCaseList_filter {
        margin-left: -0%;
        margin-top: -7.93%;
    }
    div.dataTables_filter {
        text-align: right;
    }
    .dataTables_filter label {
        display: inline-flex !important;
        margin-top: 0rem !important;
    }
    div.dataTables_wrapper div.dataTables_filter label {
        font-weight: normal;
        white-space: nowrap;
        text-align: left;
    }
</style>
<div class="row">
    <div class="bg">
        <div class="col-lg-8">
            <h5> Title</h5>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-4">
        <div id="ParentCaseList_filter" class="dataTables_filter">
            <label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="ParentCaseList"></label>
        </div>
    </div>
</div>

您还必须在其他地方造成一些冲突。

我稍微修改了代码，但影响不大。它基本上只是出于个人测试目的。

无论如何，我无法使用问题中提供的代码来重现您的问题。我什至不需要前面所述的 z-index 黑客。