Question

我有以下HTML代码：

  <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容器内。

如何在不创建此间隙的情况下在文档上浮动文本？

Answer 1

这样做：

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

Answer 2

你能试试下面的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;
    }

Answer 3

“位置：相对”仍然保留文本所在的区域。这意味着它可能偶尔会产生一些奇怪的填充/边距问题。

“position：absolute”不保留该区域。我建议只使用它而不是与相对的人进行黑客攻击。

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

你可以把整个东西包裹在一个新的div里面，这个位置是相对的，那么你的绝对像素就会从那里出来而不是屏幕0,0。

“绝对位置元素相对于第一个具有静态位置的父元素定位。如果找不到这样的元素，则包含的块为。”

在CSS中使用z-index时如何避免差距？

3 个答案: