Html 如何使标题栏折叠在网页css上

有人能告诉我CSS代码或者给我指一个关于如何实现这种效果的教程吗。 下面是我所说的图像：

---

注意：我知道如何使用绝对定位，我只需要知道它们是如何产生效果的。

这可以相对定位，也可以绝对定位-可以通过以下两种方式进行：

#item {
    position: relative;
    right: -10px; /* moves it 10px to the right */
}

或者绝对是：

#item {
    position: absolute:
    top: 20px; /* 20px from the top */
    right: -20px; /* 20px off the right edge */
}

请注意，如果绝对定位的图元没有定位的祖先，则它们将根据视口进行定位

可以使用伪元素

：before

或

：after

上的边框来完成折叠部分

---

演示：

如果功能区是问题所在，则在空（0大小）元素上使用边框（可以使用

：在
伪元素之后添加）

Html

<div id="content">
    <div id="ribbon"></div>
</div>

演示在
这是一个关于定位的问题还是关于“彩带横幅效果”的问题？谢谢你，加布，这太完美了。你能给我一个左侧的例子吗？请。@JohnFloyd，请看，只需要重新排列边框颜色并正确定位。。
#content{
    background-color:#77c;
    width:300px;
    height:200px;
    position:relative;
}
#ribbon{
    position:absolute;
    width:80px;
    height:30px;
    right:-20px;
    top:50px;
    background-color:#999;
}
#ribbon:after{
    content:'';
    width:0;
    height:0;

    border-color: transparent transparent #666 #666;
    border-style:solid;
    border-width:5px 10px;

    position:absolute;
    right:0;
    top:-10px;
}