作者：zccst

先看看手册

值

描述

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit

规定应该从父元素继承 position 属性的值。

1，relative

相对自己以前的位置偏移。

设置了top和left后，元素没有脱离文档流，仍然占用原来的位置。

2，absolute

脱离文档流，不再占用原来的位置。

1.首先不要用层叠这个词，容易把关系搞混 
2.absolute是受parentNode的position影响的 
  parentNode的position不是relative,那absolute的绝对对象是针对body的 
  parentNode的position  是relative,那absolute的绝对对象是针对parentNode的 
  也就是说absolute的绝对是有参照Node的 
3.对于复杂的position关系，要从parentNode的position的设置逐次的推下来 
4.relative的node的尺寸会影响parentNode的尺寸,也就是说relative即定位也占位 
  absolute的node的尺寸不影响parentNode的尺寸,也就是说absolute只定位不占位 
5.z-index只对absolute的node有效

几个更深入的问题：

问：如果即设置了left又设置了right，到底以哪个位置呢？

答：以left位置。同理top和bottom，以bottom为准。

例子：

<style type="text/css">

body {

 margin:0px;

 font-size: 9pt;

 line-height:12pt;

 margin-top: 150px;

 margin-left: 150px;

}

.box1 {

 background-color: #33CCFF;

 width: 200px;

 height: 200px;

}

.box2 {

 background-color: #CC99FF;

 height: 100px;

 width: 100px;

 position:relative;

 right:200px;/*此值总被认为是-left=-10px,所以你怎么改它都不会影响到布局*/

 left:10px;/*这里设定了两个定位值，但是它们是矛盾的，所以此时将以左边为准，如果是上下类型错误，则以上边定位数值为准*/  

}

</style>

<script type="text/javascript">  

</script>

</head>

<body>

<div class="box1">

  <div class="box2"></div>

</div>

　　

<style type="text/css">

<!--

*{

 margin:0px;

 padding:0px;

}

body {

 margin:10px;

 font-size: 13px;

}

a:link {

 color: #666;

 text-decoration: none;/*去除链接下划线*/

}

a:visited {

 color: #666;

 text-decoration: none;

}

a:hover {

 color: #F90;

}

h3 {

 color: #FFF;

 background-color: #F90;

 width: 100px;

 padding-top:3px;

 text-align:center;

}

ul {

 width: 300px;

 border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/

}

ul li {

 padding:5px;

 border-bottom: 1px solid #CCC;

 list-style:none;/*去除列表样式，这对于标准浏览很重要*/

}

a {

 position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/

 display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/

}

a div {

 display: none;/*初始化信息面板不显示*/

}

a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/

a:hover div {

 position: absolute;

 padding:5px;

 display:block;

 width: 245px;/*只给出宽度，高让它随内容多少自动调整*/

 left:150px;/*这是相对父级A的定位*/

 top: 20px;

 border: 1px solid rgb(91,185,233);

 background-color: rgb(228,246,255);

 z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

}

a img {

 width:80px;

 height:80px;

 border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/

 display:block;

 position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

 top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/

 left:5px;

}

dl {

 width: 160px;

 float:right;

 color: #999;

 line-height:20px;

}

dl dd span {

 font-weight: bold;

 color: #639;

}

-->

</style>

</head>  

<body>

<h3>最新单曲</h3>

<ul>  

<li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>爱的文身</dd>

 <dd><span>歌手:</span>黄圣依</dd>

 <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>

</dl></div></a></li>  

<li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>累了</dd>

 <dd><span>歌手:</span>阿信</dd>

 <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>

</dl></div></a></li>  

<li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>漫漫 慢慢</dd>

 <dd><span>歌手:</span>阿朵</dd>

 <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>

</dl></div></a></li>  

<li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>我怀念的</dd>

 <dd><span>歌手:</span>孙燕姿</dd>

 <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>

</dl></div></a></li>  

<li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>花期越来越近</dd>

 <dd><span>歌手:</span>后弦</dd>

 <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>

</dl></div></a></li>  

</ul>

对position的理解的更多相关文章

  1. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

  2. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  3. CSS之Position全面认识

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属 性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型 ...

  4. css3——position定位详解

    最近热衷于前端的开发,因为突然发现虽然对于网站.应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象.最近在开发当中发现以前对于css中的position的理解 ...

  5. 解析position定位

    关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的? 在 ...

  6. 有关CSS 定位中的盒装模型、position、z-index的学习心得

    开始整体之前我需要说明两个概念: 第一个就是   一切皆为框  也就是说在HTML中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流:  一个网页可以看作是 ...

  7. 【干货分享】前端面试知识点锦集02（CSS篇）——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  8. CSS基础转载

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4 ...

  9. css基本知识框架图

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4 ...

随机推荐

  1. hadoop中联结不同来源数据

    装载自http://www.cnblogs.com/dandingyy/archive/2013/03/01/2938462.html 有时可能需要对来自不同源的数据进行综合分析: 如下例子: 有Cu ...

  2. 如何删除tomcat下的一目

    不知道我有没有把问题想简单了,是不是应该把webapps下对应的文件夹删了就可以了. work下面对应的也删掉 这个取决于你在tomcat下发布那个项目的方式. 首先是工程的根目录要删除,然后是工程相 ...

  3. Python文件打包成EXE文件

    工具:pyinstaller 安装:pip install pyinstaller 使用: 1 将依赖文件集中到一个文件夹:           pyinstaller -D -w xxx.py    ...

  4. Activity not started, its current task has been brought to the front的解决办法

    删除bin目录下所有文件,重新启动在试试

  5. java导出和读取excel数据

    使用的是poi的jar包 下载地址http://poi.apache.org/download.html 主要是把jar包导入,直接新建一个列子测试一下就明白了.使用起来还是比较方便的,代码里面的原理 ...

  6. VIJOS P1081 野生动物园 SBT、划分树模板

    [描述] cjBBteam拥有一个很大的野生动物园.这个动物园坐落在一个狭长的山谷内,这个区域从南到北被划分成N个区域,每个区域都饲养着一头狮子.这些狮子从北到南编号为1,2,3,…,N.每头狮子都有 ...

  7. C#入门经典-第15章ListBox，CheckedListBox

  8. 关于127.0.0.1与localhost

    127.0.0.1是不会经过防火墙的,而localhost是要通过防火墙取地址的.

  9. 设计一个 iOS 控件

    转载自:http://blog.csdn.net/zhangao0086/article/details/45622875 代码的等级:可编译.可运行.可测试.可读.可维护.可复用 前言 一个控件从外 ...

  10. git版本控制（一）

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...