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定位详解的相关文章

css16----转载---position定位详解

一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top.right和bottom的CSS规则来改变元素的位置. 注意点:[a]. 元素原来位置将保留,不被其他元素所占据; [b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为参考点 ; [c]. 当使用right.top时改变元素位置时,元素将以原来位置的bor

css3——position定位详解

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

MyBatis魔法堂:ResultMap详解

一.前言   MyBatis是基于“数据库结构不可控”的思想建立的,也就是我们希望数据库遵循第三范式或BCNF,但实际事与愿违,那么结果集映射就是MyBatis为我们提供这种理想与现实间转换的手段了,而resultMap就是结果集映射的配置标签了. 二.从SQL查询结果到领域模型实体 在深入ResultMap标签前,我们需要了解从SQL查询结果集到JavaBean或POJO实体的过程. 1. 通过JDBC查询得到ResultSet对象 2. 遍历ResultSet对象并将每行数据暂存到HashM

.Net魔法堂:log4net详解

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

Java魔法堂:内部类详解

一.前言 对于内部类平时编码时使用的场景不多,比较常用的地方应该就是绑定事件处理程序的时候了(从C#.JS转向Java阵营的孩子总不不习惯用匿名内部类来做事件订阅:().本文将结合Bytecode对四种内部类作介绍,当作一次梳理以便日后查阅. 首先要明确的是内部类是编译器提供的特性,编译器会将含内部类的java文件编译成外部类和内部类的N个文件(N>=2) ,然后JVM就按普通类的方式运行.就如下面的源码会被编译为Outer.class和和Outer$Inner.class文件. class O

带你走进CSS定位详解

学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bottom right left z-index position 基本语法: position:static | absolute | fixed | relative 语法介绍: static:默认值,无特殊定位. absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,ri

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

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

小甲鱼PE详解之基址重定位详解(PE详解10)

今天有一个朋友发短消息问我说“老师,为什么PE的格式要讲的这么这么细,这可不是一般的系哦”.其实之所以将PE结构放在解密系列继基础篇之后讲并且尽可能细致的讲,不是因为小甲鱼没事找事做,主要原因是因为PE结构非常重要,再说做这个课件的确是很费神的事哈.在这里再次强调一下,只要是windows操作程序,其就要遵循PE格式,再说人家看雪的网址就是www.pediy.com. 简单的讲是可以,但是怕就怕有些朋友知识点遗漏了或者错误理解意思.不能深刻体会等,这样的效果是不好的~所以,小甲鱼尽管这系列视频可

iOS 后台持续定位详解(支持ISO9.0以上)

iOS 后台持续定位详解(支持ISO9.0以上) #import <CoreLocation/CoreLocation.h>并实现CLLocationManagerDelegate 代理,.h文件完整代码如下: [objc] view plain copy #import <UIKit/UIKit.h> #import <CoreLocation/CoreLocation.h> @interface ViewController : UIViewController&l