position

position是前端经常会用到的样式，但是position属性的各个值都是相对于什么定位的，常常会有人搞混甚至是不清楚，所以有必要总结一下

参数

images

图解

relative

relative相对于正常位置定位的

<style>
        .top,.bottom{
            width:200px;
            height:150px;
        }
        .top{
            background:#c85e7c;
        }
        .bottom{
            background:#c18401;
        }
        .positionEle{
            border:1px solid #000;
            position:relative;
            top:40px;
            left:10px;
        }
</style>
<div class="top">1.正常流</div>
<div class="bottom">2.
    <div class="positionEle">3.查看position属性的各个值相对于什么定位</div>
</div>

images

absolute

absolute是相对于离它最近的具有定位属性(除了static)的祖代元素开始定位的,如果祖代元素没有定位属性，则相对于浏览器窗口
case1：相对于浏览器窗口

 <style>
        .top,.bottom{
            width:200px;
            height:150px;
        }
        .top{
            margin-top:60px;
            background:#c85e7c;
        }
        .bottom{
            background:#c18401;
        }
        .positionEle{
            border:1px solid #000;
            position:absolute;
            top:40px;
            left:10px;
        }
    </style>
<div class="top">1.正常流</div>
<div class="bottom">2.
    <div class="positionEle">3.查看position属性的各个值相对于什么定位</div>
</div>

images
case2：相对于具有定位属性的父元素

 <style>
        .top,.bottom{
            width:200px;
            height:150px;
        }
        .top{
            background:#c85e7c;
        }
        .bottom{
            position:relative;
            background:#c18401;
        }
        .positionEle{
            border:1px solid #000;
            position:absolute;
            top:40px;
            left:10px;
        }
    </style>
</head>
<body>
<div class="top">1.正常流</div>
<div class="bottom">2.
    <div class="positionEle">3.查看position属性的各个值相对于什么定位</div>
</div>

images

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。不论祖代元素是否定位

 <style>
        .top,.bottom{
            width:200px;
            height:150px;
        }
        .top{
            background:#c85e7c;
        }
        .bottom{
            position:relative;
            background:#c18401;
        }
        .positionEle{
            border:1px solid #000;
            position:fixed;
            top:40px;
            left:10px;
        }
    </style>
<div class="top">1.正常流</div>
<div class="bottom">2.
    <div class="positionEle">3.查看position属性的各个值相对于什么定位</div>
</div>

images