overflow 导致bootstrap popover\dropdown-menu 失效

1. popover

比如:在某个item上需要使用popover,但是item存在一个滚动条中.比如:

<div class="container">
   <div class="item">A<div>
   <div class="item">A<div>
   <div class="item">A<div>
   <div class="item">A<div>
   <div class="item">A<div>
   <div class="item">A<div>
</div>

如果设置了 container 的 overflow:hidden,那么一般的用法popover弹出位置始终不对.需要增加boundery属性:

            $(".item").popover({
                content: "自己的html",
                animation: false,
                trigger: 'hover',
                placement: 'right',
                //重点设置这个属性,默认是 scrollParent
                boundary:"window",
                html: true               
            });

2. dropdown下拉失效

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

比如: 这里的 nav-item 有很多添加了滚动条, 那么dropdown-menu也弹不出来,

此时修改一个属性

        .nav .nav-item {
            position: inherit;
        }

为什么呢? 因为这里的dropdown-menu是绝对定位的,并且相对于 nav-item. 此时设置成了inherit就默认相对于body了. 就不受到混动条影响了.