阿基米德说“给我一个支点,我能翘起整个地球”，在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. Frameworks.Entity.Core 5 EntityValidation

    Project.Core\Frameworks.Entity.Core\EntityValidation\ EntityValidation 1  数值验证DigitAttribute.cs Digi ...

  2. 《阿k学Python》一Python入门(一)

    前言 各位看博客的园友们,大家好,我就是那个风流倜傥的KK,还记得我那篇2019年的年中总结博客吗?我想有许多看博客的园友是没有读过我那篇文章的,KK很生气,后果很严重(开个玩笑了,怎么可能).给大家 ...

  3. djgango装饰器

    from django.http import HttpResponse from django.views import View class MyView(View): def get(self, ...

  4. Spring注解开发系列Ⅰ--- 组件注册(上)

    传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点:1.如果所有的内容都配置在.xml文件中,那么.xml文件将会十分庞大:如果按需求分开.xml文件 ...

  5. Docker的save和export命令的区别

    我最近在玩Docker,一种应用程序容器和Linux的虚拟技术.它太酷了,创建Docker镜像和容器只需要几分钟.所有的工作都是开箱即用的. 在结束我一天的工作之前,我希望能保存下我的工作.但我在Do ...

  6. vue 新建脚手架项目npm命令

    使用国外原镜像 npm install -g @vue/cli   //yarn global add @vue/cli            使用淘宝镜像 cnpm install -g @vue/ ...

  7. 3万字总结，Mysql优化之精髓

    本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降. ...

  8. js关于时间（date）的比较

    之前在工作上遇到一个问题:使用一些时间插件,如果有俩个时间,要判断结束时间和开始时间的大小?后来就查找了一些资料,这边整理出俩个比较简便的方法. 在这我拿 laydate.js 这个插件来举例: 首先 ...

  9. 13、FrameRely

    Frame Relay 美国国家标准化协会(American National Standard Institute,简称ANSI)国际电信联盟远程通信标准化组 ITU-T 1.是由ITU和ANSI制 ...

  10. tmobst4

    (单选题)HTML代码: <table> <tr><td>Value 1</td><td></td></tr> &l ...