点击刷新
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/序号.png") 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>效果：
relative定位，相对自身偏移量为0。
© 著作权归作者所有
举报
发表评论
0/200
