阿基米德说“给我一个支点,我能翘起整个地球”，在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. 这个时候 快下班了 我来翻译一段： Pro ASP.NET MVC 3 Framework

    Binding to a Derived Type绑定派生类型Although we have focused on interfaces (since that is most relevant i ...

  2. 初学者学Java常遇到的问题，我都给你回答了！

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 春节在家刷知乎,看到了一个知乎的问题:<学 ...

  3. requests快速构造请求头的方法

    上图请求头内容,内容多不说,也不确认哪些数据是必须的,网上找到一个懒办法 快速一键生成 Python 爬虫请求头 实战演练 抓取网站:https://developer.mozilla.org... ...

  4. JS基础——ATM机终端程序编写（3.0）

    利用函数进行代码实现,要点:将每一项操作单独写成一个函数,在需要时进行调用,弄清参数的传递. 创建模拟账户 使用数组创建账户 let user = ["xiaohei", 1234 ...

  5. 压力测试---Jemeter的使用

    一.线程组配置 线程组相当于有多个用户,同时去执行相同的一批次任务.每个线程之间都是隔离的,互不影响的.一个线程的执行过程中,操作的变量,不会影响其他线程的变量值. Delay Thread crea ...

  6. python+selenium爬取百度文库不能下载的word文档

    有些时候我们需要用到百度文库的某些文章时,却发现需要会员才能下载,很难受,其实我们可以通过爬虫的方式来获取到我们所需要的文本. 工具:python3.7+selenium+任意一款编辑器 前期准备:可 ...

  7. JVM源码分析之警惕存在内存泄漏风险的FinalReference(增强版)

    概述 JAVA对象引用体系除了强引用之外,出于对性能.可扩展性等方面考虑还特地实现了四种其他引用:SoftReference.WeakReference.PhantomReference.FinalR ...

  8. 探究HashMap1.8的扩容

    扩容前 扩容后 机制 else { // preserve order Node<K,V> loHead = null, loTail = null;//低指针 Node<K,V&g ...

  9. nginx的四个主要组成部分

    1.nginx二进制可执行文件 · 由各模块源码编译出的一个文件 2.nginx.conf配置文件 · 控制nginx的行为 3.access.log访问日志 . 记录每一条http请求信息 4.er ...

  10. c++IO对象不可复制

    IO类型的3个独立的头文件: iostream定义读写控制窗口的类型, fstream 定义读写已命名文件的类型,             (包含fstream类) sstream定义读写存储在内存中 ...