Question

这样一个简单的布局，我要怎么设置css可以让ul li 里的数字显示在img图片的上面呢?

#slideshow img {
display: none;
position: absolute;
}

ul {list-style:none;margin:0px;}
ul li {float:left;}
<div id="slideshow">
<img src="img\1.jpg" alt="" />
<img src="img\2.jpg" alt="" />
<img src="img\3.jpg" alt="" />
<img src="img\4.jpg" alt="" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

Answer 1

.fff
{
margin-top:-20px;
height:20px;
....
}
<div id="slideshow">
<ul>
<li> <img src="img\1.jpg" alt="" /></li>
<li class="fff">1</li>
<li> <img src="img\2.jpg" alt="" /></li>
<li class="fff">2</li>
<li> <img src="img\3.jpg" alt="" /></li>
<li class="fff">3</li>
<li> <img src="img\4.jpg" alt="" /></li>
<li class="fff">4</li>
</ul>
</div>

Answer 2

建议使用思路和方法：
1、将四张图片合并成一张图片，然后将这张图片当作sideshow层的背景来使用，因为背景的位置用CSS是可调的
2、ul里的li可以使用绝对定位，给每个一个li加一上一个class，如
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four>4</li>
用CSS定他们的位置（可以使用绝对定位）

追问

用绝对定位后，你页面大小发生改变的话，是不是ul也乱了？

追答

最外层用相对定位，只是里面的ul li用绝对定位，其实你定的效果类似这样的

四张图拼成一张，当背景用，不用绝定位也可实现

CSS设置外层背景图片，大小和位置用CSS都可以任意设置的，举例如下：

一、网页代码如下：

二、效果图如下：

三、CSS样式代码如下：

注意CSS代码一开始设一下全局样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;border:0;}

ol,ul{list-style:none}

Answer 3

图片在css里设置为背景，ul li写在前面对应的div里面。

追问

???。。。能帮忙设置下吗？css设为背景不行啊

追答

可以的,在css里固定号宽高，设置背景图片，也不会错位

Answer 4

给li设置宽和高
然后将img分别做他们的背景

Answer 5

绝对定位。