美文网首页
定位流-固定定位

定位流-固定定位

作者: CJCJCCJ | 来源:发表于2016-11-15 11:32 被阅读9次

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

相关文章

  • CSS 四种定位 static fixed absolute r

    静态定位 不脱离文本流。元素定位的默认值。 固定定位 position:fixed; 固定定位 脱离文本流。元素的...

  • 10-CSS定位流

    定位流 定位流分类相对定位绝对定位固定定位静态定位 相对定位 什么是相对定位?相对定位就是相对于自己以前在标准流中...

  • 定位流

    定位流分类 相对定位->relative 绝对定位->absolute 固定定位->fix...

  • 定位流

    定位流指的是:相对定位(relative)/绝对定位(absolute)/固定定位(fixed) 不包括静态定位(...

  • 3.28 定位流(二) 2D转换模块

    3. 固定定位 固定定位脱离标准流,不会占用标准流中的空间 固定定位不区分块级,行内和行内块级元素 固定定位会让元...

  • 定位流-固定定位

    1.什么是固定定位?position: fixed; 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图...

  • 定位

    定位流分类: 相对定位 绝对定位 固定定位 静态定位 什么是相对定位? 相对定位就是相对于自己以前在标准流中的位置...

  • 2017-02-23 CSS 学习笔记

    定位流 定位流分类 相对定位 绝对定位 固定定位 静态定位 什么是相对定位相对定位就是相对于自己以前在标准中的位置...

  • 2019-04-17定位

    定位 绝对定位absolute:父级没有定位时时,相对文档定位,脱离文档流,提升层级相对定位relative:固定...

  • 前端定位

    相对定位: 相对定位特点: 绝对定位: 绝对定位的特性: 固定定位: 文档流: 家庭作业: 选择器调用:

网友评论

      本文标题:定位流-固定定位

      本文链接:https://www.haomeiwen.com/subject/kobkpttx.html