定位div使其看起来像一个标签

时间:2012-08-31 17:15:45

标签: css html positioning

我在div中有一个div。我想要一个延伸出shell div,所以它类似于一个标签。我认为只使用带负值的绝对定位会将其推出父div。这似乎不起作用。是否有CSS解决方法?

实施例 http://jsfiddle.net/W3CyT/

3 个答案:

答案 0 :(得分:1)

您正确地执行了此操作,但是,您需要重新考虑bottomright的值。

如果您希望红色框从右侧的黑框突出,请考虑删除right:0并应用left:100%。这种方法保证无论黑盒子和红盒子有多宽,红盒子总是在外面向右边;它们与宽度尺寸无关。这可能是理想的,因为您可能想要动态地或将来更改任一框的大小(它不会将您锁定到硬设置值)。

Here's a fiddle of what I'm talking about.

答案 1 :(得分:1)

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;
}

答案 2 :(得分:0)

您可以使用Z-Index并将一个位于另一个之上。使用Twitter引导程序代码有一种更好的方法。

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

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