阿基米德说“给我一个支点,我能翘起整个地球”，在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. 痞子衡嵌入式：语音处理工具pzh-speech诞生记（2）- 界面构建(wxFormBuilder3.8.0)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具pzh-py-speech诞生之界面构建. 之前痞子衡设计过一个串口调试助手pzh-py-com,也专门写过一篇关于其界面构 ...

  2. Python赋值没有返回值+笔试

    >>> def test(): i = 1 return i=2 SyntaxError: invalid syntax 原因是python 中赋值语句没有返回值,这里不是C++

  3. CQOI十二省联考游记

    Day 0 看似稳如老狗的我实则慌得一逼 看了一上午的CRT,一个字没看进去 我反复安慰自己:我才高一,我才高一 但是,明年的联赛会不会跟今年一样高呢? 明年的心态会不会有现在这么好呢? 明年同届的d ...

  4. Linux 系统常用管理命令(精简笔记)

    Linux是一套免费使用和自由传播的类Unix操作系统,下面的笔记是我从鸟菜中摘抄出来的重要命令,并进行了一定的排版,摒弃了一些用不到的乱七八糟的命令,目的是在生产环境中能够快速的定位并查询需要命令的 ...

  5. jenkins集成jmeter-进阶篇

    1.gitlab自动触发jenkins构建 1⃣️安装插件: 2⃣️新建工程,设置git url,build when a change is pushed auto.sh /bin/sh echo ...

  6. Linux防火墙之iptables入门

    一.防火墙的概念 什么是防火墙?防火墙是一台或一组设备,用以在网络间实施访问控制策略:事实上一个防火墙能够包含OSI模型中的很多层,并且可能会涉及进行数据包过滤的设备,它可以实施数据包检查和过滤,在更 ...

  7. WSL初始配置+图形界面

    安装WSL 换源 参考另一篇文章https://www.cnblogs.com/bosslv/p/11006680.html 修改$PATH,默认会把windows的PATH也加入WSL中,不需要的话 ...

  8. 一文教你一次性完成Helm 3迁移

    2019年,Kubernetes软件包管理器--Helm发布了最新版本Helm 3,并且该版本已经stable.Helm 3中的一些关键特性我们在之前的文章中已经介绍过,其中一些功能吸引了许多开发人员 ...

  9. 6、RIP

    在路由查找时,有类路由查找方式和无类路由查找的区别:有类路由查找:1.首先匹配主网条目.主网信息2.匹配上主网之后,再去查找子网信息3.查找到子网,就会转发,否则就丢弃4.有一种例外,没有找到主网和子 ...

  10. tmobst2

    (单选题)与下面代码效果相同的HQL 语句是( ). Criteria criteria = session.createCriteria(User.class); criteria.add(Rest ...