CSS 中的 position 属性

可能对CSS 稍微有点了解的人都知道position这个属性,妈蛋不就一个position么,有毛可说的。可别小看position,position属性有那几个值,这个可是facebook 面试的第一个问题,你真能回答出来么?

文字前面简单介绍了基础内容,如果你有兴趣试着回答下后面成人版的问题。

儿童版

position属性有几个值只是开始,当你回答之后肯定会继续让你说一说详细的,但是首先你要说出有那几个值。

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

还有一个inherit不放在一起是因为这个值的意思是继承父元素的属性,所以就不放在一起讨论了。

static

static为默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

这里要注意的是z-index只在定位的元素上生效,有时候你发现z-index无效很可能就是因为没进行position定位。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。位移后并不影响其他元素的位置。

一般不考虑兼容性的话推荐时候translate3d来进行位移。

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

sticky

position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。

成人版

当position:absolute的所有父元素均为static的时候是相对于谁定位的呢?

当top bottom left right 同时出现会出现什么情况呢?

position:absolute 和 float 的区别是什么?

top:100% 和 left:100% 是相对于谁的,margin-left:100% 和 margin-top:100% 又是相对于谁呢?

9

Related Posts

Comments : 9

  1. 成人版,我又邪恶了…. :|

  2. 完全看不懂。。。 :sad:

  3. 虽然偶尔会遇到,但是真正答起来感觉有点复杂,试着猜着答下,哈哈
    1、父元素如果没有设置relative的时候,会相对整个网页定位(body)
    2、如果上下左右都出现,会有white:100%;height:100%;的效果
    3、一个绝对定位,一个相对定位?
    4、如果父级没有relative,top、left什么的会相对body(top:100%+left:100%会超出网页吧?),margin会相对父元素

    也不知道对不对,感觉有些东西不知道怎么去描述 :!:

    1. @Tokin

      看来你还不是一个成年人。 :x

    2. @bigfa 等待 18发 的标准答案 :smile:

    3. @Tokin

      你自己实验下就知道了嘛,又不是很麻烦。。我没打算写答案,而且我写出来也不一定是对的。

  4. 写css的时候会头疼。。平时还是不头疼了~

    1. @synyan

      不如做些有意义的事情。

  5. 一直都是相对父级定位元素定位的,一直往上级查找,直到有除“static”的定位。包括fixed,你把“fixed”嵌套在别的定位里面,也会出现很有意思的情况。

发表留言

Post Comment