作者：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. 源代码管理工具-GIT

    源代码管理工具-GIT ---- 一. 掌握 - git 概述 1. git 简介? 什么是git? git是一款开源的分布式版本控制工具在世界上所有的分布式版本控制工具中,git是最快.最简单.最流 ...

  2. 初识Selenium（一）

    Selenium入门相关PPT参考网址:http://wenku.baidu.com/view/d1e7d90390c69ec3d5bb7565.html?from=search 内容引用网址:htt ...

  3. 数据格式处理（数字，日期），java处理，jsp的fmt处理

    java 格式处理  public static String formatTosepara(float data) {DecimalFormat df = new DecimalFormat(&qu ...

  4. java 随机流

    Example10_8.java import java.io.*; public class Example10_8 { public static void main(String args[]) ...

  5. mplayer最全的命令

    前段时间做过qt内嵌mplayer的一个小程序,感觉mplayer还行不过不支持打开图片感觉有点无力.话不多说上代码: QString path="d:/1.mkv"; QWidg ...

  6. 关于python的可变和不可变对象

    在python中所有都是对象,在python中只有list和dict是可变对象,其他都是不可变对象. 具体参照:http://www.cnblogs.com/lovemo1314/archive/20 ...

  7. 浅谈：html5和html的区别

    什么是html5呢? html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言,随后和W3C的xhtml2.0(标准)相结合,产生现在最新一代的超文本标记语言.可以简单点理 ...

  8. C# 双引号的输出

    Console.WriteLine("\"a little list.\"");

  9. IP 网际协议

    1. IP数据首部长度: 4位版本号 : 4 位,用于标明 IP 版本号,0100 表示 IPv4,0110 表示 IPv6.目前常见的是 IPv4. 4位首部长度: 首部长度是占4位,可表示的最大十 ...

  10. UINavigationBar

    iOS项目,根据设计图,有时需要自定义UIView的UINavigationBar的背景.可以切出来一张1像素左右的背景图片,来充当UINavigationBar的背景. 可以利用Navigation ...