Question

在过去的两个小时里，我的这个问题一直很严重。令人难以置信。

我正在创建一个简单的左栏，其中包含三个组件，标题背景，中间重复的白色背景和机器人背景。由于某些愚蠢的原因，中间重复背景与标题重叠。当我使用“background-position”时，它不会向下移动。

这是我的css代码：

.leftcolumn .block{

background-color:#FFFFFF;

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_center.png);[/url]
background-position:0px 10px;
background-repeat: repeat-y;

width:205px;
}


.leftcolumn .block .wrap {

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_header.png);[/url]
background-repeat: no-repeat no-repeat;
width:205px;
padding-left:0px;
padding-top:10px;

}


.leftcolumn .block .bot {
background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_bot.png);[/url]
background-repeat: no-repeat repeat;
background-position: 0px 51px;
}

我的HTML：

        <div class="block">

            <div class="wrap">

            <div class="navigation">
                <ul>
                <li><a href="#" title="">Link 1</a></li>
                <li><a href="#" title="">Link 2</a></li>
                <li><a href="#" title="">Link 3</a></li>

                </ul>
            </div>
            </div>
            <span class="bot"> </span>

        </div>

Answer 1

background-position不会移动实际元素，只会在它开始获取图像的位置。一个例子是精灵图像，您设置背景位置以获得过度状态，然后设置另一个用于悬停状态。您可能想尝试使用实际定位（即top，bottom，left和right），或尝试使用边距来定位您想要的位置。至于iamserious'评论，在标题中添加内容和display:block;也会有所帮助。

Answer 2

这是你要找的吗？

http://jsfiddle.net/7TVkh/

CSS定位不起作用

2 个答案: