CSS学习笔记-position

  相信每一个前端新手都碰到过很头疼的问题,明明是把元素定位到这个位置,效果出来后却跑到了那个位置,设置其周围偏移后也没反应,感觉心好累。position属性定义建立元素布局所用的定位机制,只有把它整明白,定位的时候才能心想事成。

position可能的值

  1.固定定位(fix) 相对于浏览器窗口定位,元素脱离正常流,元素的位置通过 "left", "top", "right" , "bottom" 和"z-index"属性进行规定。并且元素会生成一个块级框,而不论该元素本身是什么类型。

  2.绝对定位(absolute) 相对于 static 定位以外的第一个父元素进行定位,元素脱离正常流。元素的位置通过 "left", "top", "right" , "bottom" 和"z-index" 属性进行规定。并且元素会生成一个块级框,而不论该元素本身是什么类型。

  3.相对定位(relative) 相对于其正常文档流位置进行定位。元素在正常流中,其位置通过 "left", "top", "right" , "bottom" 和"z-index" 属性进行规定。因此,"left:20px" 会向元素原来位置右偏20px,由于相对定位元素未脱离正常流,刚才偏移的20px区间内没有任何内容。

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

  5.继承定位(inherit) 直接从父元素继承 position 属性的值。

实例操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css"  rel="stylesheet">
    <title></title>
</head>
<body>
<div class="content">
    <div id="staticdiv1">
        <span>static1</span>
        <div id="fixdiv1">
            <span>fix1</span>
        </div>
    </div>
    <div id="relativediv1">
        <span>relative1</span>
        <div id="inheritdiv1">
            <span>inherit1</span>
        </div>
    </div>
    <div id="staticdiv2">
        <span>static2</span>
        <div id="absolutediv1">
            <span>absolute1</span>
        </div>
    </div>
</div>
</body>
</html>

div{
    float: left;
}
.content{
    position: relative;
    width: 600px;
    height: 300px;
    padding: 10px;
    background-color: lightgray;
    color: white;
    font-size: 16px;
    font-weight: bold;
}
#staticdiv1,#staticdiv2{
    width: 200px;
    height: 200px;
    background-color: red;
}
#fixdiv1{
    position: fixed;
    top: 10px;
    right: 100px;
    width: 200px;
    height: 200px;
    background-color: green;
}
#relativediv1{
    position: relative;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: blue;
}
#absolutediv1{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: purple;
}
#inheritdiv1{
    position: inherit;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}

效果图

  上图是Chrome中看到的实际效果,所有div都添加了float属性,让所有元素显示在一行里面,更加直观,下面对其分别说明:

  1. 两个红色的static为默认position属性;
  2. 绿色的fix1父元素为static1,但因为是固定定位,所以跑到了浏览器的最右边;
  3. 蓝色的relative1在原来正常流中左边和上边分别偏移了100px;
  4. 黑色的inherit1继承了relative1的position属性,即还是relative,并top和right各偏移了100px;
  5. 紫色的absolute1可能需要特别留意,从html中可以看到,其父元素本来是static2,但static2是静态定位,所以absolute1最终相对于content定位。这里absolute和relative1的top都是100px,但absolute的位置要比relative1高一点,实际高10px,难道是因为content的margin问题,这里只能这样猜测了。

总结

  通过上面的实例,只要把position的这几个属性放在一起对比,还是能很好理解不同属性之间的差异,帮助我们快速掌握。


作者:飞路
出处: http://www.cnblogs.com/haizhideng/
关于作者:一名默默无闻的码农,热爱编程,如有问题或建议,请多多赐教!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

posted @ 2018-01-13 15:06  飞路  阅读(111)  评论(0)    收藏  举报