Question

我有一个'main_menu'div，其中包含一个在y轴上重复的背景图像。在这个div之上我有另一个用于标题的div。问题是标题div的图像高度约为75px。我想在main_div中启动文本，距离main_div的背景图像实际开始的位置高出50 px。

我想的是：

position:absolute; top:-50px;

这不起作用。问题是如何将文本向上移动，同时将背景图像保持在正常位置。

由于

{编辑}

这是CSS

.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;    

}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;    
}

这是html

<div class="menu_header">Some Header</div>
<div class="menu_main">
    <ul>
        <li>Educational Objective</li>
        <li>Projects</li>
        <li>Class Preparation</li>
        <li>Testimonials</li>
    </ul>
</div>

所以你可以看到标题非常高。所以我想在menu_main div中启动大约50px以上的文本

Answer 1

使用负上边距。

.menu_main ul {margin-top：-50px;}

Answer 2

你可以像使用绝对定位那样移动它，然后像这样移动背景：

background:url(someimage.png) repeat-y left 50px;

这将移动您的bg图像，使其开始向下50px。

如果您提供屏幕截图或更多代码或实时示例，我可能会提供更多帮助......

Answer 3

您可以专门为UL设计样式：

.nav
{
  position: relative;
  top: -50px;
}

和

<ul class="nav">
...

或者将UL放在另一个DIV类=“nav”中。

Answer 4

但你可以向下移动背景（例如5像素）：

background-position: top 5px;

在CSS中保留背景图像的同时移动文本

4 个答案: