css - 定位 div 使其看起来像一个选项卡

Question

我在一个 div 中有一个 div。我想要一个延伸到外壳 div 之外，所以它类似于一个选项卡。我认为仅使用具有负值的绝对定位会将其推出父 div。这似乎行不通。有 CSS 解决方法吗？

示例 http://jsfiddle.net/W3CyT/

Answer 1

你做得对，但是，你需要重新考虑你的价值观bottom和right。

如果您希望红框从右侧的黑框突出，请考虑移除right:0并left:100%改为应用。这种做法保证了无论黑框和红框有多宽，红框始终在外侧向右；它们与宽度大小无关。这可能是理想的，因为您可能希望动态或将来更改任一框的大小（它不会将您锁定在硬设置值中）。

这是我正在谈论的内容。

Answer 2

http://jsfiddle.net/iambriansreed/W3CyT/4/

CSS

#sideWall {
    height:100px;
    width:100px;
    position:absolute;
    top: 10;
    left: 10;
    background: black;
    margin-top: 60px; /* give room for tab */
}

.showSideWall {
    height: 60px;
    width: 30px;
    position: absolute;
    top: -60px; /* move tab above container */
    right: 0;
    background: red;
}

Answer 3

您可以使用 Z-Index 并将一个放在另一个之上。使用 Twitter 引导代码有更好的方法。

http://twitter.github.com/bootstrap/

他们为您提供各种酷功能的模板