Bootstrap和Z-Index

Question

我遇到了z-index属性的问题，我已经将其包含在具有Pinterest Widget的div中。

在以前不是Bootstrap的应用程序中，我能够简单地设置z-index：2，这有助于隐藏标题后面的Widget的一部分。

这里我将标题div和父列div设置为z-index：1 Widget div和它的父div到z：index：2

$output = array();

foreach($file1 as $element)
{
    $file1_count = find_element($element['name']);
    $count = $element['count']/(1+$file1_count);
    $output[] = array('name'=>$element['name'],'count'=>$count);
}

function find_element($element)
{
    foreach($this->control_group as $_element) {
        if($_element['name'] === $element)
            return $_element['count'];
    }

    return 0;
}

我也试过将overflow：隐藏在widget div中，但我似乎无法让它工作。

My Test Site

有关此z-index的任何建议都将受到赞赏。

Answer 1

即使您将z-index样式应用于.headline，也请确保包含适当的position规则。 z-index仅适用于position规则而非默认

的元素

source

由于您的元素呈现为透明，如果您希望隐藏＆＃34;这个小部件的一部分，设置background-color将满足此

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

Answer 2

Z-index仅影响位置值不是＆＃34;静态＆＃34; （默认）。

Answer 3

<强> 1）。

确保您在z-index;的情况下宣布某个职位，position: relative;是最优的。

<强> 2）。

确保声明z-index:高于pintrest API / iframe所引用的{。}}。

第3。）

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

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

<强> 4）。

如果没有其他方法可行..你可以使用position: absolute;和z-index; 强制它（虽然不推荐）

Answer 4

在我的特定情况下，绝对定位可以解决问题。相对定位压低了其他引导程序元素。

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