代码之家 › 专栏 › 技术社区 › Steven

在CSS中使用z-index时如何避免间隙?

xhtml css

Steven · 技术社区 · 14 年前

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

3 回复 | 直到 14 年前

Nathan MacInnes 14 年前

这样做:

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

kobe 14 年前

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

Nicki 14 年前

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

你可以用一个新的div来包装整件事,这个div的位置是:relative,那么你的绝对像素将从这个div中去掉,而不是屏幕0,0。

" 绝对位置元素相对于第一个位置不是静态的父元素进行定位。如果找不到这样的元素,则包含块为。 "

推荐文章

Luis Pavez · 在actionListener完成之前更新组件

6 年前

mike · 使用类似封送处理的编码器操纵HTML

6 年前

ajaysheoran2323 · 如何使网站多语言[关闭]

7 年前

Hanlei Price · 标记验证

7 年前

Irum · 获取错误:UI指令无法强制转换到组织。素数面。模型菜单菜单元素

7 年前

curiousToKnow · 如何从xhtml获取文本

7 年前

zinon · XHTML渲染生成空pdf文件

7 年前

saurabh · 如何在一个页面中使用多个ajax日历

7 年前

Gabriel Cardoso · 更新数据后在datatable中更新

7 年前

mac wac · AngularJS的内联模板不适用于XHTML

8 年前