CSS帮助在底部重叠顶部

标签 css positioning

我正在创建一个选项卡布局,需要#tab1 容器与#tabHeader 容器重叠。这是我到目前为止的代码:

<div id="tabsContainer">
  <div id="tab1" style="height: 25px;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:14px; float:left; padding-left: 4px; position: relative;">
    <div style="float:left; background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;  height:25px; width: 6px; "></div>
    <div style="float:left; background:url(css/tabs/images/tab_Selected_Content.png) repeat-x; height:25px; text-align: center; padding-left: 5px; padding-right: 5px; padding-top: 4px; ">Home</div>
    <div style="float:left; background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;  height:25px; width: 8px; "></div>
  </div>
  <div id="tabHeader" style="width: 100%; border-top: #8db2e3 solid 1px; clear:both; height:2px;margin-top: -12px;"></div>
</div>

所以我需要让 tab1 位于 tabHeader 部分顶部 1px 处。我创建的任何其他选项卡都会做同样的事情。我尝试了一些东西,但我对 CSS 定位很不满意。任何帮助将不胜感激!

最佳答案

这是您要找的吗:http://jsfiddle.net/GfNve/

另外,使用样式表:)

关于CSS帮助在底部重叠顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5043505/

相关文章:

css - 2 列 - 单击一列中的缩略图显示另一列中的文本

html - Chrome/Safari 和行内 block 元素

css - 使用 CSS 定位工具提示

android - Edittext 行距额外和光标位置问题

css - div position apply to another div 错误

css - 为什么我的响应式 CSS 没有占用媒体宽度?

javascript - threejs 波浪背景如何给内容模拟波浪效果

css - 文本底部在 chrome 中被截断

css - 跨浏览器 CSS 边距和 float 定位

css - 没有标题图像重叠的广告横幅的绝对定位