Bootstrap和Z-Index

dxxyhpgq 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(5)|浏览(146)

我有一个问题与z-index属性，我已经包括在一个div，有一个Pinterest Widget。
在以前的一个不是Bootstrap的应用程序中，我可以简单地设置z-index：2，这将有助于将这个Widget的一部分隐藏在标题后面。
这里我将标题div和父列div设置为z-index：1 Widget div及其父div设置为z：index：2

<div class="col-md-4 md-margin-bottom-20 hidden-sm hidden-xs" style="z-index:1">
   <div class="">
       <div class="col-sm-12 col-md-12" style="padding-left: 0; padding-right: 0; z-index:1;">
           <div class="headline" style="z-index:1;">
               <h2>Recent Job Pictures</h2>
           </div>
           <div class="" style="z-index:2;">
               <div style="margin-top:-46px; z-index:2;">
                   <a data-pin-do="embedUser" href="http://www.pinterest.com/davincispainter/" data-pin-scale-width="65"  data-pin-scale-height="162" data-pin-board-width="360"></a>
               </div>
               <!-- Please call pinit.js only once per page -->
               <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
           </div>
       </div>
   </div>
</div>

字符串
我也试过将overflow：hidden放置在widget div中，但我似乎无法让它工作。
x1c 0d1x的数据
My Test Site
任何关于此z指数的建议将不胜感激。

twitter-bootstrap

来源：https://stackoverflow.com/questions/30108750/bootstrap-and-z-index

5条答案

按热度按时间

wz3gfoph1#

即使您将z-index样式应用于.headline，也要确保包含适当的position规则。z-index仅应用于具有非默认position规则的元素
source
由于您的元素呈现为透明，如果您希望“隐藏”此小部件的一部分，设置background-color将满足此要求

.headline {
    z-index: 1;
    background-color: white;
    position: relative;
}

字符串

赞(0）回复(0）举报 2023-11-15

gcmastyq2#

1.）

确保您使用z-index;声明头寸，在您的情况下，position: relative;是最佳的。

2.）

确保您声明的z-index:高于pintrest API / iframe引入的z-index:。

3.）

确保你甚至需要z-index;，尝试在Q中将position: relative;添加到你的元素中。

.headline { 
    // your styles
    position: relative;
}

字符串

4.）

如果没有其他工作..你可以用position: absolute;和z-index; * 强制它（尽管不推荐）*

赞(0）回复(0）举报 2023-11-15

zhte4eai3#

Z索引只影响位置值不是“static”（默认值）的元素。

赞(0）回复(0）举报 2023-11-15

qv7cva1a4#

100%工作Bootstrap 5 z-index类：*

z-index-n2: This class represents z-index: -2. 
z-index-n1: This class represents z-index: -1. 
z-index-0: This class represents z-index: 0.
z-index-1: This class represents z-index: 1. 
z-index-2: This class represents z-index: 2. 
z-index-3: This class represents z-index: 3.

字符串

赞(0）回复(0）举报 2023-11-15

v09wglhw5#

在我的特殊情况下，绝对定位起了作用，而相对定位则会向下推其他引导元素。

.headline { 
    z-index: 2147483647;
    position: absolute;    
}

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

Bootstrap和Z-Index

5条答案

相关问题

热门标签

最新问答