美文网首页
position相关

position相关

作者: 会有猫惹 | 来源:发表于2017-02-23 09:12 被阅读0次
    一、position的各个属性值的定义:

    1.static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。
    2.relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
    3.absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
    4.fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

    absolute和relative的区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。

    relative:
    absolute:
    二、absolute的特性:包裹性和破坏性
    1.包裹性:

    包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。

    这一点和float相同,有float或position: absolute时,display就没用了。

    相关文章

      网友评论

          本文标题:position相关

          本文链接:https://www.haomeiwen.com/subject/fanywttx.html