Css中Position定位详解

html-css010

Css中Position定位详解,第1张

Position属性确认元素的定位

static 是默认定位值,它的定位元素不受top、left、right、bottom的影响,也就是说你给元素设置这四个属性的任何值都没有效果

relative 相对定位,设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。

比如说在做表单布局的时候,有时候label的值并没有和输入框上下居中对齐,它有一点点偏下,效果不是很好看,这个时候我们可以给label向上设置一下偏移让他们居中对齐

absolute是绝对定位,绝对定位的元素相对于最近的定位祖先元素进行定位,如果没有定位祖先元素,那么就按body定位

absolute最典型的例子就是结合relative一块完成效果,比如我有一个p,它是在页面居中的,但是它的宽度和高度是动态的,我们还有一个span标签希望永远在这右下角10px的位置,这个时候我们就可以利用absolute完成

fixed 是相对视口定位的,简称浮云定位,这个意味着就像你滚动页面,它始终位于同一个位置,top、left、right、bottom用于设置当前元素的位置。

常用的例子就是页面右下角,滚动到顶部的的功能,我们可以对这个元素设置fixed浮动定位,当用户一直向下滚动浏览网页后,想一下子回到顶部,它只要点这个元素就行了,因为之个元素是浮云定位,所以永远是在用户可视范围的右下角

1、新建html文件。

2、创建两个div,并赋予id。

3、为两个div设置宽高和背景,并设置左右浮动。

4、预览效果如图。

5、创建第三个div。

6、为第三个div设置宽高和背景。

7、预览效果如图。

注意事项:

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

是浏览器的默认样式

你在#divtest ul中加上margin:0padding:0

#divtest ul{

margin:0padding:0

position:absolute

height:200px

width:1500px

overflow:hidden

border:#C03 dotted 1px

top:0

left:0

}