如何避免在CSS中使用z-index时出现间隙？

我有以下的HTML代码：如何避免在CSS中使用z-index时出现间隙？

<div class="outer_container"> 
    <div id="imgContainer"> 
     <img src="/some/image" />    
    </div> 

    <div id="slogan"> 
     <span class="quote">Some text here</span> 
    </div> 

    <div id="footer" class="gray_top_border"> 
     Some text here 
    </div> 
    </div>

这是我的CSS：

.outer_container { 
    background-color:#FFFFFF; 
    margin:0 auto; 
    width:960px; 
} 

#slogan { 
    font-size: 3em; 
    position: relative; 
    z-index: 999; 
    bottom: 50px; 
    left: 50px; 
} 

#footer { 
    border-top:1px solid #B5B5B5; 
    min-height:50px; 
    padding:10px; 
}

使用此代码，我得到的图像和页脚之间的差距3EM。
如果我将位置从relative更改为absolute，差距问题就消失了。但是，然后顶部/左侧位置是相对于浏览器窗口，而不是在DIV容器内。

如何在文本上浮动文本而不会造成这种差距？

来源

2010-11-10 Steven

@stevan你给口号为相对，如果是这样，你为什么给他们底部和左侧，它应该只是为了立场：绝对正确。 – kobe 2010-11-10 08:29:35

@stevan，如果页脚想要从底部缩进50px，并且应该将页脚设置为绝对，并将父页设置为相对的 – kobe 2010-11-10 08:30:34

您可能尚未设置父容器的位置，您需要对'＃slogan'元素执行此操作有希望的效果，请张贴其余的CSS，以便我们可以看到元素如何与其他人交互:) – Kyle 2010-11-10 08:33:52

该做的：

#slogan { 
    font-size: 3em; 
    position: relative; 
    height: 0; 
    overflow: visible; 
    z-index: 999; 
    bottom: 50px; 
    left: 50px; 
}

来源

2010-11-10 08:38:16

是不是很好的做法，给位置相对和底部，左 – kobe 2010-11-10 08:43:52

不，这是不好的做法，但我回答了这个问题。事实是，添加这两个参数（高度和溢出）确实可以消除间隙，然而在此之后设置位置是另一回事。 – 2010-11-10 08:48:59

感谢弥敦道，这工作。可能不是一个理想的解决方案，但它的工作:) – Steven 2010-11-10 08:58:21

你可以试试下面的CSS。

#slogan { 
     font-size: 3em; 
     position: relative; 
     z-index: 999; 
     margin-top:-20px; 

    } 

    #footer { 
position:absolute; 
bottom:10px 

     border-top:1px solid #B5B5B5; 
     min-height:50px; 
     padding:10px; 
    }

来源

2010-11-10 08:56:03 kobe

“的位置：相对”仍然保留文本将一直在该地区这意味着它可以在一段时间做一些奇怪的填充/保证金的问题一次。

“position：absolute”不保留区域。我建议只使用它，而不是用相关的黑客。

http://www.w3schools.com/css/css_positioning.asp

你可以用整个事情在一个新的div的地位：相对那么你绝对像素将来自代替屏幕0,0出去。

“绝对位置元件相对于具有比静态以外的位置的第一父元素的位置。如果没有找到这样的元素，包含块是。”

来源

2010-11-10 09:30:49 Nicki

如何避免在CSS中使用z-index时出现间隙？

回答

相关问题