绝对位置相对位置

最新推荐文章于 2020-12-09 20:17:39 发布

原创最新推荐文章于 2020-12-09 20:17:39 发布 · 194 阅读

1 ·

CC 4.0 BY-SA版权

static：正常的 top right bottom left 都不起作用
relative:相对位置

<style>
    h1,p{
        border:2px solid black;
    }
    #yi{
        background: #674480
        position: relative;
        top: 33px;//会有一个position的框框相对于原来位置距离33同理bottom也是
    }

</style>
<h1>静夜思</h1>
<p>床前明月光</p>
<p id="yi">疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

absolute：绝对位置，但针对于容器的盒子，margin
不塌陷
fixed：位置固定滑动网页

实现一个简单的布局

<style>
    div{
        width:96px;
        height:96px;
        border:2px solid black;
        font-size: 88px;
        font-family: 隶书;
        position:relative;
    }
    #chun{
        top: 100px;
    }
     #xia{
        bottom:100px;
    }
    #qiu{
        left:100px;
        bottom:200px;
    }
    #dong{
        left:100px;
        bottom:200px;
    }

</style>
<div id="chun" style="background: cyan;color:red">春</div>
<div id="xia"style="background: red;color:cyan;">夏</div>
<div id="qiu"style="background: white;">秋</div>
<div id="dong"  style="background: black;color:white ">冬</div>