专栏首页偏前端工程师的驿站CSS魔法堂:Position定位详解

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/StormSpirit/archive/2012/10/15/2715316.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS魔法堂:元素克隆、剪切技术研究

    一、前言                                     当需要新元素时我们可以通过 document.createElement 接口...

    ^_^肥仔John
  • WebComponent魔法堂:深究Custom Element 之 标准构建

    前言  通过《WebComponent魔法堂:深究Custom Element 之 面向痛点编程》,我们明白到其实Custom Element并不是什么新东西,...

    ^_^肥仔John
  • CSS魔法堂:选择器及其优先级

    一、前言                               首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. im...

    ^_^肥仔John
  • 「资深前端工程师总结」前端面试知识点大全—CSS篇

    display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;元素原来占据的空间位置不保留;产生回流和重绘;

    用户5997198
  • 前端入门系列之HTML

    超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是...

    王大锤
  • 总结伪类和伪元素(转)

    先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:

    山河木马
  • CSS入门3-认识html之元素

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习。 ? ? 边框、填充、对齐和浮动 这部分将主要介绍使用CSS控制整个Web页面的各个方面,通常来说,会使用margin(外部)...

    用户1216676
  • Pseudo elements伪元素与Pseudo classes伪类

    ::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

    gojam
  • 如何使用python进行web抓取?

    本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券