zoukankan      html  css  js  c++  java
  • 定位 position

    定位 position

      fix:完全脱离文档流,参照物是可视窗口,可以设置top left right bottom

      relative: 不脱离文档流,参照物是自己原来的位置,可以设置top left right bottom

      absolute: 完全脱离文档流,参照物是已定位的父级标签,可以设置top left right bottom

    举例:

    fix:上一篇的返回顶部

    relative:

    定义三个div,如下图

    设置C2为relative

     position: relative; top:200px; left: 200px; 

    效果如下:

    未脱离文档流,相对于自己原来的位置偏离200px,

    absolute

    body

    <div class="c1">C1</div>
    <div class="box"><div class="c2">C2</div></div>
    <div class="c3">C3</div>

    style

     body{
                margin: 0;
            }
            .c1{
                 200px;
                height: 200px;
                background-color: #53868B;
    
            }
            .c2{
                 200px;
                height:200px;
                background-color: cornflowerblue;
                position: absolute;
                top:200px;
                left: 200px;
    
            }
            .c3{
                 200px;
                height: 200px;
                background-color: darkmagenta;
    
            }
    
            .box{
                position: relative;
            }

    给C2设置一个父级div叫box,设置为relative,不脱离文档流,C2本身设置为absolute,脱离文档流,相对于父级的位置移动200px,而C3则会上移,

    效果如下:

    如果不加box这个div,则会相对于body为参照物,效果如下:

  • 相关阅读:
    编程珠玑(续) 读书笔记 -(第三章 程序员的忏悔)
    java for循环
    java 中的 instanceof
    大脑学习
    voa 2015.4.29
    编程珠玑(续) 读书笔记 -(前言+第一章性能监视工具)
    voa 2015 / 4 / 27
    voa 2015 / 4 / 26
    背包问题 算法实现
    LCS 算法实现
  • 原文地址:https://www.cnblogs.com/litzhiai/p/8325725.html
Copyright © 2011-2022 走看看