也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解。
1、简介
position有五个属性: static | relative | absolute | fixed | inherit
static 和 inherit : 没什么值得介绍的。
relative : 相对于元素自身的定位。
absolute :相对于包含块的定位。
fixed : 相对于窗口的定位。
2、包含块
包含块就是 top | right | bottom | left 参考的元素。
absolute的包含块指的是:该元素最近的具有定位设置的父元素,即最近的position属性值不为static的祖先元素举个例子:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><body>
<div id="outer" style="position:absolute">
<div id="inner">
<span style="position:absolute">span</span>
</div>
</div>
</body>
对于span元素来讲,它的包含块是#outer,而不是#inner,因为#outer设置了 position:absolute。值得注意的是,只要#outer设置了 absolute | relative | fixed span元素的“定位父元素”就是#outer,如果outer没有设置三种属性的其中之一,则span的包含块就是html元素。
relative的包含块指的是:元素自身。
3、top | right | bottom | left 的细节。
也许你会想当然的认为这些值有什么细节可言,那你就错了。在此以left为例:
left值 = “定位父元素”border内边 到 该元素margin外边的举例 ,简单的记忆就是“border内,margin外”。
right | bottom | left 也是这种道理
4、z-index
关于z-index的细节,这里就不说了,因为觉得自己表达不清,而且《CSS权威指南》相应章节里对z-index讲的非常清楚(特别是叠放上下文的相关知识),这些知识是非常有用的。
如果你能看懂下面这个层叠顺序,则证明你对z-index的学习已经非常成熟了。要注意其中#one1 元素 #two元素的层叠顺序。
例子:http://www.kangchangan.cn/cnblog/zIndexStackingContext.html
5、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed , 该元素就会脱离文档流。
但是relative元素是个特例,因为该元素对然脱离了文档流,但是它原本所占的空间仍然占据文档流。
例如:
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
position:relative;
left:50px;
top:40px;
background-color:#FF9900;
}
</style>
</head>
<body>
<p> rain-man rain-man rain-man rain-man rain-man <br />
rain-man rain-man <span>cnblog</span> rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br /></p>
</body>
</html>
6、positon 与 display
元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位
<span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的,
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>,这里的display:block就是多余的了。
7、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
8、Bug
Bug1:
参考网页: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html,哎这个就是IE的bug了,解决办法就是为#container设置 z-index:11 || 大于10的整数。
Bug2:
bug页面:http://www.kangchangan.cn/cnblog/floatPosition.html
解决页面:http://www.kangchangan.cn/cnblog/floatPosition2.html
相关解释已经在解决页面了。
相关推荐
第三部分:relative定位 第四部分:absolute定位 第五部分:重叠的元素--z-index属性 第六部分:脱离档流导致的问题
主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下
主要介绍了举例详解CSS中position属性的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下
主要介绍了深入理解css中position属性及z-index属性(推荐),想要学习了解CSS样式的同学,可以了解一下。希望对大家的学习有所帮助。
主要介绍了图解CSS中position属性的定位用法,重点讲解了相对定位和绝对定位在页面布局中的作用,需要的朋友可以参考下
主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料,position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性,感兴趣的小...
positon有4个属性:static relative absolute fixed,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么...
批量输出 CSS background-position 属性的定位像素值
CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。 position的四个属性值: relative absolute ...
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...
定位的话,父DIV设置position:relative后,子DIV的position:absolute就会相对父DIV作绝对定位,接下来为大家介绍下CSS的position属性在DIV层中的应用
position属性的相关定义:static:无特殊定位,对象遵循正常文档流;relative:对象遵循正常文档流;absolute:对象脱离正常文档流fixed:对象脱离正常文档流,有兴趣的朋友可以参考下哈
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解。 在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,...
关于CSS position属性值absolute,relative的解释.zip
对于前端开发工程师来说,编写CSS是前端开发工作中必不可少的一个内容,在CSS中的position属性又是非常重要的一个方面。顾名思义,所谓position,即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石,看似很...