定位流-固定定位

2016-11-15  本文已影响9人  CJCJCCJ

1.什么是固定定位?position: fixed;

固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级

应用场景

*{
            margin: 0;
            padding: 0;
        }

        .nav{
            width: 100%;
            height: 45px;
            background: url("images/nav.png") no-repeat center top;
            position: fixed;
            top:0px;
        }

        .content{
            width:100%;
            height:8250px;
            background: url("images/content.png") no-repeat center top;
        }

        div img:first-child{
            position: fixed;
            top:50%;
            margin-top: -100px;
            left: 0px;
        }
        div img:last-child{
            position: fixed;
            top:50%;
            margin-top: -100px;
            right: 0px;
        }

        a{
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 50px;
            text-decoration: none;
            line-height: 50px;
            text-align: center;
            background-color: rgba(0,0,0,0.3);
            color: white;
        }
<div class="nav"></div>
<div class="content">
    <img src="images/left_ad.png" alt="">
    <img src="images/right_ad.png" alt="">
</div>
<a href="#">返回</a>
Paste_Image.png
上一篇 下一篇

猜你喜欢

热点阅读