CSS魔法堂:Position定位详解

一、Position各属性值详解                    

  1.  static :默认值,元素将按照正常文档流规则排列。

  2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left、top、right和bottom的CSS规则来改变元素的位置。

注意点:[a]. 元素原来位置将保留,不被其他元素所占据;

[b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为参考点 ;

[c]. 当使用right、top时改变元素位置时,元素将以原来位置的border外边框的右上角作为参考点 ;

[d]. 当使用left、bottom时改变元素位置时,元素将以原来位置的border外边框的左下角作为参考点 ;

[e]. 当使用right、bottom时改变元素位置时,元素将以原来位置的border外边框的右下角作为参考点 ;

3.  absolute :绝对定位,元素脱离正常文档流,可通过left、top、right和bottom的CSS规则来改变元素的位置

    注意点:[a]. 元素将不再占据原有位置;

此处定义 变量X,以下内容将使用X代替参考点

      条件:当元素的offsetParent为body而且body没有进行CSS定位,则X=页面;

其他情况,X=offsetParent的border外边框。

[b]. 当使用left,top改变元素位置时,元素将以X的左上角或作为参考点 ;

[c]. 当使用right、top时改变元素位置时,元素将以X的右上角作为参考点 ;

[d]. 当使用left、bottom时改变元素位置时,元素将以X的左下角作为参考点 ;

[e]. 当使用right、bottom时改变元素位置时,元素将以X的右下角作为参考点 ;

  4.  fixed :固定定位,元素脱离正常文档流,可通过left、top、right和bottom的CSS规则来改变元素的位置

注意点:[a]. 元素将不再占据原有位置;

        [b]. 以浏览器的可视区域的四角作为参考点。

[c]. IE5.5~6不支持该属性值。

可使用js来修复,对于拖动滚动条元素闪铄的bug需要通过下列的CSS来处理。

*html{
     background-image:url(about:blank);
     background-attachment:fixed;
}

body{
     _background-image:url(about:blank);
     _background-attachment:fixed;
}

二、 何谓脱离文档流                          

脱离文档流的意思,就是不再占据文档位置。

三、何谓CSS定位                          

CSS定位,就是元素的position不为static。而该元素将成为其亲子元素的offsetParent,也有机会成为其孙元素的offsetParent。

四、总结                              

CSS定位貌似简单,但又容易忽视细节部分,本文尽量记录研究所得,希望大家一起来将其充实。

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3967350.html ^_^肥仔John

时间: 09-11

CSS魔法堂:Position定位详解的相关文章

css3——position定位详解

最近热衷于前端的开发,因为突然发现虽然对于网站.应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象.最近在开发当中发现以前对于css中的position的理解有些偏颇,在这里分享一下这几天的学习. 首先总体介绍一下接下来要分析的position属性的两个值:absolute和relative(绝对定位和相对定位), 绝对定位:1.当某元素使用绝对定位并且未设置top,left的值时,实际上并未真正脱离文档流,2.使用绝对定位并且设置了top,left时,

.Net魔法堂:log4net详解

一.作用 提供一个记录日志的框架,可以将日志信息记录到文件.控制台.Windows事件日志和数据库(MSSQL.Acess.Oracle.DB2和SQLite等). 二.先看看示例,感受一下吧   config配置文件 <?xml version="1.0" encoding="utf-8"?> <configuration> <configSections> <section name="log4net"

jQuery的offset()和position()用法详解

offset()和position()用法详解: 这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这两个方法的用法. 下面先看一下它们基本的定义: 1.offset()方法的定义: 此方法获取或者设置匹配元素在当前document的相对偏移. 此方法只对可见元素有效. 当获取偏移量时,方法的返回值是一个包含两个整型属性(top和left)的对象. 设置偏移量时,此方法的参数是带有top和left属性的对象. 具体用法可以参阅jQuery的offset()方法一章节. 2.positio

css动画-animation各个属性详解(转)

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

Css选择器定位详解

1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的标签,然后加一个“.”符号,跟上 class 属性的值 2.使用相对ID选择器定位元素,方法如下: WebElement ele = driver.findElement(By.cssSelector("input#username")); 即可以先指定一个 HTML 标签,然后加上一个“

CSS通过设置position定位的三种常用定位

CSS中可以通过设置为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置,或者固定显示在某一个位置,或者显示在某一层页面之上. position的值可以设为relative,absolute,fixed,static. HTML代码里定义两个区块: 1 <div class="box"> 2 <div class="box1"></div> 3 </div> 1.相对定位: 1 .box { 2

CSS中的position定位

CSS定位有4中类型:通过position属性设置http://www.w3school.com.cn/cssref/pr_class_position.aspstatic:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)relative:生成相对定位的元素,相当于其正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.absolute:生成绝对定位的元素,相对于 static 定位以外的第

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不

PHP.8-HTML+CSS(二)-HTML详解

HTML+CSS HTML参考手册[http://www.w3school.com.cn/tags/index.asp] 0.HTML主体标记 代码分为三部分编写 <html> 是网页文件的最外层标记 <head> 之间的文本是头信息 不会显示在浏览器中,包括基本的描述,整个网页的公共属性 </head> <body> 是网页文件的主体部分 正文 :文字.图片.链接.表单等 </body> </html> 1.HTML文档头部标记 &