阿基米德说“给我一个支点,我能翘起整个地球”，在HTML页面中，给你一个坐标，可以把任何一个元素定位目标点，这就是定位！CSS有三种基本的定位机制：相对定位、绝对定位、固定定位，决定定位的position属性的值有static默认标准流，当然这个就不用多说了；fixed固定定位，releative相对定位，absoulte绝对定位，结论如下:1.定位配合坐标点top bottom left right;2.相对定位相对于自身位置自增或者自减，坐标起点是原来所在位置;3.absolute绝对定位找最近的position属性，没有的话，就找父集进行定位。代码展示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>position属性值4缺一带你了解相对还是绝对抑或是固定定位</title>

     <style type="text/css">

         div{

             width: 200px;

             height: 200px;

             color: #fff;

         }

         .box1{

             width: 120px;

             height: 50px;

             line-height: 50px;

             background-color: darkviolet;

             position: fixed;

             bottom: 100px;

             right: 50px;

             text-align: center;

             border-radius: 5px;

         }

     /* 固定定位,常见页面在线客服固定在某一个位置，怎么解决？ */

     /*配合定位 top bottom left right坐标点分2组 top bottom / left right*/

     /*bottom: 100px; 底部往上100px*/

         .box2{

             background-color: red;

             /* position: relative;

             left:200px;

             top:30px; */

         }

     /*相对定位*//*相对于自身位置自增或者自减，坐标起点是原来所在位置*/

     /*向元素的原始上侧位置增加30像素。*/

     /*向元素的原始左侧位置增加200像素。*/

         .box3{

             background-color: chartreuse;

             /* position: absolute;

             top: 100px;

             left: 100px; */

         }

     /*发现box3添加绝对定位后位置飘到box2上面去了,box4上来了，box3的参考坐标点是body*/

         .box4{

             background-color: crimson;

         }

         .box5{

             /* bottom: 300px;

             right: 400px;

             position: fixed; */

             margin:0 auto;

             position: relative;

             background-color: darkmagenta;

         }

         .box6{

             width: 100px;

             height: 100px;

             background-color:blue;

             position: absolute;

             top: 100px;

             left: 100px;

         }

         /*结论absolute绝对定位找最近的position属性，没有的话，就找父集*/

     </style>

 </head>

 <body>

     <!--情景一绝对定位在外面-->

     <div class="box1">hello!固定定位</div>

     <!-- br*100 回车快捷键 展示如下-->

     <div class="box2"></div>

     <div class="box3"></div>

     <div class="box4"></div>

     <!--情景二绝对定位在里面-->

     <div class="box5">

         <div class="box6">绝对定位</div>

     </div>

 </body>

 </html>

拓展：东北玛丽的小笔记该篇“position定位的四种属性”

position属性值4缺一带你了解相对还是绝对抑或是固定定位的更多相关文章

  1. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  2. position 属性值：relative 与 absolute 区别

    absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...

  3. 知识点摸清 - - position属性值之relative与absolute

    两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  7. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  8. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. RainbowPlan团队项目-总结

    博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求在哪里 https:// ...

  2. Quantitative Trading with R（一）：两个简单的策略

    下面是两个使用R中的Quantstrat包进行策略构建的例子,都是对600550.ss.600192.ss.600152.ss.600644.ss.600885.ss.600151.ss六只股票进行投 ...

  3. CSS-13-块级元素和行内元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Java 构造方法总结

    Java 构造方法总结 ①方法名和 类名相同 ②在方法名的前面没有返回值类型的声明 ③在方法中不能使用return语句返回一个值 ④在创建对象时,要调用new,如:book b1=new book() ...

  5. nmap详解之基础示例

    扫描主机target.example.com的所有TCP端口 nmap -v target.example.com 发起对target.example.com所在网络上的所有255个IP地址的秘密SY ...

  6. IntelliJ IDEA 2020 的Debug功能也太好用了，真香！

    写在前边 作为一个有点强迫症的程序员来说,所有的应用软件.开发工具都必须要升级到最高版本,否则就会很难受到坐立不安.日思夜想.茶饭不思.至于什么时候得的这种病我也记不清了,哈哈哈 IntelliJ I ...

  7. TensorFlow相关博客

    Tensor官方教程 极客学院TensorFlow中文文档 xf__mao的博客

  8. 2019icpc徐州现场赛 H Yuuki and a problem (树状数组套主席树)

    题意 2e5的数组,q个操作 1.将\(a[x]\)改为y 2.求下标l到r内所有的\(a[i]\)通过加法不能构成的最小的值 思路 通过二操作可以知道需要提取l到r内的值及其数量,而提取下标为l到r ...

  9. 配置 Docker 加速器

    Linux curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io ...

  10. 【算法】混合流体模拟demo

    展示一个流体模拟算法的实现 地址:http://www.iqiyi.com/w_19rzs1anol.html 采用C++编写,Blender渲染. 截图 参考文献 REN, B., LI, C., ...