css人员定位,CSS定位

标签：

1.文档流

文档流，是指盒子按照HTML标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，每个盒子都占据自己的位置。

2.关于定位

我们可以使用css的position属性来设置元素的定位类型，设置如下：

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

.box01{

background-color: yellow;

position: relative;

left: 50px;

}

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

(3)fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

(4)static默认值，没有定位，元素出现在正常的文档流种，相当于取消定位属性或者不设置定位属性。

(5)inherit 从父元素继承position属性的值

3.定位元素的偏移

定位的元素还需要用left，right，top，bottom来设置相对于参照元素的偏移值。

代码

定位例子

.con{

width: 80px;

height: 80px;

background-color: gold;

margin: 50px auto;

position: relative;

border-radius: 14px;

}

.box{

width: 28px;

height: 28px;

background-color: red;

text-align: center;

line-height: 28px;

position: absolute;

left: 70px;

top: -15px;

border-radius: 14px;

}

5

代码2

定位02

.meun{

width: 800px;

height: 100px;

position: fixed; /*fixed内容悬浮在浏览器上*/

top: 0px;

left: 50%;

margin-left: -400px;

/*margin: 50px auto;*/

background-color: gold;

}

p{

text-align: center;

}

.popup{

width: 500px;

height: 300px;

background-color: aqua;

border: 1px solid #000000;

position: fixed;

left: 50%;

margin-left: -250px;

top: 50%;

margin-top: -150px;

z-index: 100;

}

.mask{

width: 100%;

height: 100%;

background-color: #000000;

position: fixed;

left: 0;

top: 0;

opacity: 0.5; /*opacity透明度*/

z-index: 98;

}

.pupcon{

display: block; /*调整display值隐藏或显示弹框*/

}

菜单

标题

4.background属性

是CSS应用较多且重要的一个属性，负责给盒子设置背景图片和背景颜色的，background是一个复合属性，

(1)background-color 设置背景颜色

(2)background-image 设置背景图片地址

(3)background-repeat 设置背景图片如何重复平铺

(4)background-position 设置背景图片的位置

(5)background-attachment 设置背景图片是固定还是随着页面滚动条滚动

推荐用法：background：#000 url(bgimage.gif) no-repeat left center fixed

代码

背景图定位

.box,.box01{

width: 120px;

height: 160px;

border: 1px solid #000;

background: url("image/夏8.png");

background-position: -150px -60px;

position: absolute;

}

.box{

left: 100%;

}

.boxcon{

height: 162px;

/*border: 1px solid #000;*/

}

.boxcon h1{

display: inline-block;

position: absolute;

left: 50%;

margin-left: -80px;

font-size: 50px;

color: pink;

}

.box02{

width: 620px;

height: 720px;

border: 1px solid #000;

background: url("image/夏8.png");

background-position: -580px -50px;

position: absolute;

left: 50%;

margin-left: -250px;

}

body{

margin: 0px;

}

夏目友人帐

代码2

雪碧图列表

.list{

list-style: none;

width: 300px;

height: 305px;

margin: 50px auto;

padding: 0;

/*background-color: aqua;*/

}

.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;

}

• 美国队长
• 惊奇队长
• 蝙蝠侠
• 海王
• 钢铁侠

标签：

来源： http://blog.51cto.com/13742773/2334071