定位“值”多少?

一、定位的属性值

    1、position:fixed

              固定定位。顾名思义,元素设置了固定定位之后,位置不会发生改变。即相对于视窗定位,不论浏览器怎么拖拉,该元素的位置不会发生改变

        1.1、fixed定位对元素的影响

               元素被设置fixed定位之后会完全脱离文档流,不占用HTML的空间。如果是行级元素,设置成fixed定位之后具有块级元素的特性,即可以设置宽高,也可以支持CSS样式;如果是块级元素的话,则该元素会失去对其父级的宽度的继承。这里要注意的是,如果元素设置fixed定位之后,位置必须有初始化,否则我们的可视范围将看不到该元素,并且元素一旦设置了fixed定位之后,在设置float时。将不会生效。

     2、position:relative

              相对定位。即相对于元素自身定位,若给元素设置top与left时,该元素的移动参照物将以自己的当前位置为起点上下左右移动。

         2.1、relative定位对元素的影响

               元素设置成relative之后,将不会脱离文档流,即它当前的位置不会被其他元素所占用。当元素设置成relative时,不会改变行块元素的默认表现形式。一般元素设置成relative之后不会对其自身产生影响,所以一般相对定位是结合绝对定位设置,作为绝对定位的参照点

     3、position:absolute

              绝对定位。如果此时元素的父级没有设置定位元素,则该元素相对于浏览器进行定位,如果元素的父级设置成定位元素,则该元素的参照点为其父级。即以其父级为原点上下左右移动。

         3.1、absolute定位对元素的影响  

               元素一旦设置决定定位之后将会完全脱离文档流,不会占用任何位置。如果是行级元素,设置成fixed定位之后具有块级元素的特性,即可以设置宽高,也可以支持CSS样式;如果是块级元素的话,则该元素会失去对其父级的宽度的继承。

     4、position:static

            默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明) 

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,843评论 1 88
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 3,215评论 0 13
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 801评论 0 6
  • 一、文档流的概念指什么?有哪些方式可以让元素脱离文档流? 文档里指元素在文档中的位置由元素在html里的位置决定,...
    dengpan阅读 176评论 0 3
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素 浮动元素是设置float...
    Volcaner阅读 83评论 0 0