对Css属性：positon的认识与理解！

Position的值有：absolute,fixed,relative,static,inherit.

absolute的描述:1.生成绝对定位的元素，相对于static定位以外的第一个父元素定位。

                          2. 元素的位置通过"left","top","right","bottom"属性进行规定。

fixde的描述：1.生成绝对定位元素，相对于浏览器窗口进行定位。

               　  2. 元素的位置通过"left","top","right","bottom"属性进行规定。

relative的描述：1.生成相对定位的元素，相对于它的正常位置进行定位。

                            2.例如："left:20",会向元素的left位置添加20像素（px）

static的描述：是一个默认值，没有定位，元素会在正常位置。

inherit的描述：规定应该父元素继承position属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .boa div{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        margin-right: 30px;
        display: inline-block;
        text-align: center;
        font-size: 30px;
        line-height: 200px;
    }
    .bob{
        position: relative;
        left: 20px;
        top: 20px;
    }
    .boc .three{
        position: absolute;
        left: 100px;
        background-color:rgb(194, 173, 176);
        z-index: 77;
        opacity: .6;
    }
    .bod{
        height: 600px;
        position: relative;
    }
    .boe{
        position: sticky;
        height: 100px;
        width: 100px;
        top: 100px;
        background-color: rgb(182, 189, 186);
        margin-bottom: 100px;
    }
    .bof{
        position: sticky;
        height: 100px;
        width: 100px;
        top: 50px;
        opacity: .8;
        background-color: rgb(118, 219, 175);
    }
    .boh{
        height: 1200px;
        background-color: aquamarine;
    }
</style>
<body>
    <div class="boa">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
        <div class="four">four</div>
    </div>
    <div class="bod">
        <div class="boe">absol</div>
        <div class="bof"></div>
    </div>
    <div class="boh"></div>
</body>
</html>

 

posted @ 2018-10-15 17:46  SuperPonder  阅读(300)  评论(0)  编辑  收藏  举报