位置：相对；样式破坏了我的 select 下拉动画

Question

Class col-md-6 破坏我的 ng-select 下拉动画

当我从浏览器的开发者工具中禁用它时，一切看起来都很好。当我将 class col-md-6 的样式替换为此时：

.col-md-6 {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

一切正常，但我不能只为我的所有布局替换 position: relative;，所以我需要一个解决方案来帮助我删除我的 select 的样式。我试图将 class col-md-6 覆盖到另一个双胞胎 class 但它似乎无法正常工作。当我编辑原始 col-md-6 class 时，仅有效。帮我！我添加了一些片段以使其清楚。

HTML:

<div class="container">
  <br>
  <br>
  <div class="row">
    <div class="col-md-6 my-broken-select">
      //this select conflict with "Example paragraf" 
      <mdb-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
      <label>Blue select</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
        <p>Example paragraf</p>
    </div>
  </div>
</div>

CSS:

//work!!
.col-md-6 {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
//NOT work!!
.my-broken-select {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
//NOT work!!
 .col-md-6.my-broken-select {
     position: static;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }
//NOT work!!
.my-broken-select {
    position: static!important;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

编辑：

这可能很重要。我的双胞胎 class 的样式已分配给损坏的 div，但仍然无法正常工作...但是当我禁用原始 col-md-6 中已经禁用的样式时，它开始工作。

无效：

http://prntscr.com/h48fkj

工作：

http://prntscr.com/h48f93

Answer 1

如果不使用 !important，您可以轻松覆盖您的代码，这一切都是为了组织您的代码，我的意思是，如果您在 .col-md-6 之后定义 .my-broken-select，它应该会正确覆盖它，希望这 Fiddle 解决了您的问题。

更新

如果您使用 Bootstrap，只需将您的客户 css link 放在 Bootstrap[ 之后=24=] css link，看下面就明白了：

<html> <head> <link rel="stylesheet" type="text/css" href="Bootstrap.css"> <link rel="stylesheet" type="text/css" href="yourCustomeStyle.css"> </head> <body>  </body> </html>

Answer 2

好的，我想通了。
问题是偷偷摸摸的 "Example paragraph" 仍然有 position: relative;。这就是为什么当我从原始 class 禁用此样式时，一切都开始正常工作

当我增加消除 position: relative 影响的 z-index 时，解决方案如下所示：

 .my-broken-select {
    z-index: 1500
}

解决了问题。

位置：相对；样式破坏了我的 select 下拉动画

position: relative; style destroying my select dropdown animation

html

css

twitter-bootstrap

angular

bootstrap-material-design