阿基米德说“给我一个支点,我能翘起整个地球”，在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. [洛谷P3621] [APIO2007] 风铃

    Description 你准备给弟弟 Ike 买一件礼物,但是,Ike 挑选礼物的方式很特别:他只喜欢那些能被他排成有序形状的东西. 你准备给 Ike 买一个风铃.风铃是一种多层的装饰品,一般挂在天花 ...

  2. Cobalt_Strike扩展插件

    Cobalt_Strike3.14下载: https://download.csdn.net/download/weixin_41082546/11604021 https://github.com/ ...

  3. 团队第一次作业（By七个小矮人）

    一.团队简介 1.团队名称:七个小矮人 2.团队成员列表 201731024137 马驰(队长) 201731021227 于丁 201731024114 杨汶桐 201731024125 李朋珂 2 ...

  4. python之pymysql模块

    模块安装 pip install pymysql 执行sql语句 import pymysql #通过pymysql下的connect函数来建立一个传输通道,连接本地mysql的所以host地址是12 ...

  5. Shell与进程

    查看当前运行的进程 名称: ps 使用权限: 所有使用者 使用方式: ps [options] [--help] 说明: 显示瞬间行程 (process) 的动态 参数: ps的参数非常多, 在此仅列 ...

  6. windows 安装mongodb2

    安装文件:mongodb-win32-x86_64-2008plus-ssl-3.2.6-signed.msi 电脑配置:win7 64位 MongoDB的安装很简单,设置好安装路径后,一直Next直 ...

  7. maven项目pom.xml加载本地jar,自定义jar

    将jar放到resource目录下面: pom添加配置 <!-- 加载IK自定义 依赖--> <dependency> <groupId>com.ik.up< ...

  8. kubernetes secret 和 serviceaccount删除

    背景 今天通过配置创建了一个serviceaccounts和secret,后面由于某种原因想再次创建发现已存在一个serviceaccounts和rolebindings.rbac.authoriza ...

  9. CSS-- 实用CSS样式

    自用实用CSS样式 1.清除DIV浮动 <span style="font-family:KaiTi_GB2312;">clear: both;</span> ...

  10. Kotlin Android项目静态检查工具的使用

    Kotlin Android项目静态检查工具的使用 Kotlin Android项目可用的静态检查工具: Android官方的Lint, 第三方的ktlint和detekt. 静态检查工具 静态检查工 ...