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/序号.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>

效果:

Snipaste_2019-12-23_15-18-43.jpg

relative定位,相对自身偏移量为0。

Image placeholder
前端答疑
未设置
  32人点赞

没有讨论,发表一下自己的看法吧

推荐文章
多个ul怎么定义不同css?

多个ul怎么定义不同css?相同的元素,定义不同的css,只需要活用选择器就可以实现了。1、给ul命名,idclass都行,例如 CSS中就是把ul换成相应的名字:(注意空格)div#myul{}//

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

html怎么加载css?

有四种加载方式:行内式通过html的style属性实现,如下所示//写在body标签中 行内式嵌入式在style标签中写css样式,在body中引用//写在style标签中的css样式 p{ colo

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为

React v16.9 中unsafe的生命周期函数

https://zh-hans.reactjs.org/b...Unsafe的生命周期 componentWillMount→UNSAFE_componentWillMount 没有用过,不描述

angular material怎么安装?

怎么安装angularmaterial?1、前期准备:npm(安装node即可),angularcli脚手架2、自建项目ngnewmy-app//my-app项目名字 nggcproject//组件名

html怎么加粗字体?

html怎么加粗字体?1、h(1~6标签)书写方式h1标签->html怎么加粗字体 h2标签->html怎么加粗字体 h3标签->html怎么加粗字体 h4标签->html怎么加粗字体 h5标签->h

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css中怎么设置没有内容时高度为0

css中怎么设置没有内容时高度为0默认情况下HTML元素没有内容时,高度就是0,不需要手动设置。但这时有些元素仍然具有margin属性,这会对其他元素造成影响,如p标签。(相关课程推荐:css视频教程

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

asp怎么调用css中样式

asp怎么调用css中样式asp调用外部css文件有以下三种方式:1、link链接方式在需要调用的asp文件中写入一下语句:(相关课程推荐:css视频教程)2、@import导入方式在需要调用的asp

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

css中怎么设置图片大小?

css中怎么设置图片大小?语法:img{ width:150px; height:60px; }注:这里设置CSS宽度为150px,css高度为60px,CSS样式中width和height的值都单位

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

css怎么设置粘性定位?

css怎么设置粘性定位?粘性定位的设置方法是给元素添加position:sticky;,sticky是css定位新增属性,类似static(没有定位)和固定定位fixed的结合。它主要用在对scrol

css定位怎么实现居中?

css定位怎么实现居中?使用绝对定位absolute是一种常用、兼容性很好的方式。.element{ width:600px;height:400px; position:absolute; left

HTML怎样引入jQuery?

HTML怎样引入jQuery?jquery的引入方式有两种,一种是本地引入,一种是引入在线jquery。相关专题推荐:《jQuery教程》方式一:本地引入(这种方法要求本地有jquery.js):我们

js中如何引入css文件以及路径问题

js中如何引入css文件以及路径问题一、在js中引入css文件的方法:1、通过document.createElement方法创建link标签;2、通过setAttribute方法设置link标签的c

css中Position属性图文详解

1.介绍1.1说明Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。1.2主要的值①absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。

如何在css中让图片横向展开排列?

如何在css中让图片横向展开排列?1、首先添加一个div来存放所有的图片。2、然后隐藏div在纵向的滚动条,横向的滚动条设置为自动。3、最后设置divwhite-space:nowrap不换行即可。这

css中1em什么意思?

css中1em什么意思?em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em为了简化font-size的

js中如何移除css样式?

js中如何移除css样式?dom元素应用css有两种方式:●通过class类名和id名应用样式●通过指定style属性应用样式我们可以针对以上两种方式写移除css样式的方法(相关课程推荐:JS视频教程

css中bfc是什么意思?

css中bfc是什么意思?说BFC之前先说说文档流,文档流分为:浮动流、定位流、普通的标准流,而普通标准流其实就是BFC中的FC。FC:formattingcontext的英文缩写,翻译过来就是格式化

css中变换属性有哪些?

css中变换属性有哪些?1、matrixmatrix(,,,,,)以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵2、tra