css中ul怎么定位

css中ul怎么定位

css中所有的元素默认都是static定位，要改变ul的定位方式，我们只需要指定元素的css position属性即可。

关于定位的几种方式

1、static定位(普通流定位) --默认定位
2、float定位(浮动定位) 例：float:left;
3、relative定位(相对定位) position:relative;
4、absolute定位(绝对定位) position:absolute;

relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

（相关课程推荐：css视频教程）

absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相当于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪碧图列表</title>
<style type="text/css">
.list{
        position: relative;
        top: 0;
        left: 0;
    list-style: none;
    width: 300px;
    height: 305px;
    margin: 50px auto;
    padding: 0;
}
.list li{
    height: 60px;
    border-bottom: 1px dotted #000;
    line-height: 60px;
    text-indent: 60px; 
    background: url("/image/序号.webp") no-repeat left 3px;
}
.list .sty02{
    background-position: 0px -62px;
}
.list .sty03{
    background-position: 0px -117px;
}
.list .sty04{ 
    background-position: 0px -182px;
}
.list .sty05{
    background-position: 0px -243px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="sty01">美国队长</li>
    <li class="sty02">惊奇队长</li>
    <li class="sty03">蝙蝠侠</li>
    <li class="sty04">海王</li>
    <li class="sty05">钢铁侠</li>
</ul>
</body>

效果：