CSS魔法堂:Position定位详解-阿里云开发者社区

开发者社区> 肥仔john> 正文

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的padding外边框。

                     [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;
}

二、 何谓文档流                               

  将窗体自上而下分成一行行,并在每一行中按从左到右的顺序排放元素,即为文档流。
  有三种情况将使得元素脱离文档流,分别是浮动(float left or right)、绝对定位(position:absolute)、固定定位(position:fixed)。

 

三、何谓CSS定位                          

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

 

四、总结                              

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

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

 

五、参考                              

http://www.cnblogs.com/StormSpirit/archive/2012/10/15/2715316.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9477 0
Java 执行 Postgresql Jdbc 类型异常时,复杂sql难定位的解决方案
Java 执行 Postgresql Jdbc 类型异常时,复杂sql难定位的解决方案
70 0
IOS地图定位坐标偏差解决方案(实战通过)
--------------------------------------------------------------------- 很抱歉,本篇文章的算法经过实践证明有问题; 正确的转码算法地址见以下两个链接: http://www.
902 0
iOS13 一次Crash定位 - 被释放的NSURL.host
每年一次的iOS升级,都会给开发者带来一些适配工作,一些原本工作正常的代码可能就会发生崩溃。 本文讲到了一种 CoreFoundation 对象的内存管理方式在iOS13上遇到的问题。
2362 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13160 0
结合AliOS Things谈嵌入式系统通用问题定位方法(2):内核相关基础
内核提供的任务创建接口,会存在参数指定当前任务创建完立即运行还是需要显示调用start运行,需要注意。如果在创建任务时指定了立即执行,而在创建任务后去设置任务参数,可能是不生效的。(尤其posix的pthread接口经常遇到这种问题)
78 0
HaaS100开发调试系列 之 定位AliOS Things内存及Crash问题
本文主要说开发调试过程中经常遇到的内存问题。
77 0
+关注
肥仔john
偏前端的临栈工程师^_^
203
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载