如何让文字站在div之上？

Question

我想在div上创建一个菜单，所以基本上文本就在它上面（参见示例）。 我希望将菜单的文本放在同一个div中，所以html是这样的：

<div id="text">
            <div id="menu">Portfolio &nbsp;|&nbsp; About us</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

提前致谢。

Answer 1

相对地定位div（position: relative;），然后绝对地定位文本（position:absolute;）。确保文本位于div内的元素内，然后将嵌套元素的top位置设置为负数，直到它符合您的喜好。

要使其居中，您需要了解left和right属性。

Answer 2

This JSFiddle只是模仿您的屏幕截图。

我必须将其添加到#menu样式：

margin-bottom: 0;
padding-bottom: 0;
line-height: 1em;

然后这到#text p：

margin-top: 0;

这就是诀窍。

让它全部集中在一起就像这样简单：

#text {
    width: 500px;
    margin: 0 auto;
}

Answer 3

您可以使用相对/绝对定位或尝试这样的

     <div id="text">
          <div id="menu">Portfolio &nbsp;|&nbsp; About us</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

在你的CSS中：

    #text{
       text-align:center;
    }
    #menu{
      margin-top:-20px;
    }

Answer 4

请参阅http://jsfiddle.net/rVjCB/

HTML：

<div class="menu">
    <ul class="top">
        <li>Portfolio</li>
        <li>About us</li>
    </ul>
    Text
</div>

CSS：

.menu{
    background:#957F00;
    max-width:500px;
    margin:0 auto;
    color:white;
}
.menu>.top{
    background:white;
    overflow:hidden;
    color:black;
}

.menu>.top>li{
    float:left;
    width:50%;
    border-left:3px solid #957F00;
    margin-left:-3px;
    text-align:center;
}