position属性：
  static:静止
  relative：相对的
  fixed：固定的
  absolu：绝对的

position的一些实例子如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS文件/例子6.css">
</head>
<body>
        <div class="box" id="one">One</div>
        <div class="box" id="two">Two</div>
        <div class="box" id="three">Three</div>
        <div class="box" id="four">Four</div>
        <div id="id"></div>
       
   
</body>
</html>
CSS:

.box {
    width: 100px;
    height: 100px;
    background: red;
    color: white;
  }
  #one{
    position: static;
  }
  #two {
    position: relative;/*relative的位置是基于原来的位置*/
    top: 1000px;
    left: 20px;
    background: blue;
  }
  #three{
      position: fixed;/* fixed简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；
      注意：固定定位的位置是相对于前一个位置的；*/
      top: 200px;
      left: 500px;
      background: yellow;
  }
  #four{
    position: absolute;/*absolute相对于前一个位置的*/
    top: 20px;
    left: 700px;
  }
 
 
 

关于position的一些问题的更多相关文章

  1. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

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

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

  4. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  5. css知多少（11）——position

    1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...

  6. Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}

    今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...

  7. 函数：MySQL中字符串匹配函数LOCATE和POSITION使用方法

    1. 用法一 LOCATE(substr,str) POSITION(substr IN str) 函数返回子串substr在字符串str中第一次出现的位置.如果子串substr在str中不存在,返回 ...

  8. CSS:position:fixed使用(转)

    position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...

  9. position导致Safari工具栏不自动隐藏

    一般情况下,移动端网页在上滑的时候,Safari的工具栏会自动隐藏掉,下滑的时候又会出现. 但是,如果可滑动区域的最外层box写了position:absolute,就不会自动隐藏了. 例如像这样的页 ...

  10. 元素堆叠问题、z-index、position

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

随机推荐

  1. wordpress-基础插件，常用函数

    一,插件制作 1.首先在plugin文件夹下创建一个php文件,我以制作一个banner插件为例,把以下代码拷贝到php文件中 <?php add_action("init" ...

  2. maven war项目完整配置

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  3. 解决JNI native 线程不能正常退出的问题

    本人刚涉足学习C++ 安卓  java,遇到这个棘手的问题,多谢博客园作者lknlfy 看了你的博客解决了这个问题,此文转发, 方便日后学习 以下内容转自lknlfy作者博客  传送门:http:// ...

  4. javascript设计模式阅读后的感悟与总结

    单例模式 用于创建唯一的一个对象. 核心在于一个判断 var index if(index){ return index; } init(); 这样只会在第一次的时候初始化创建对象,以后都不会再创建对 ...

  5. 八大排序算法——希尔（shell）排序（动图演示 思路分析 实例代码java 复杂度分析）

    一.动图演示 二.思路分析 希尔排序是把记录按下标的一定增量分组,对每组使用直接插入排序算法排序:随着增量逐渐减少,每组包含的关键词越来越多,当增量减至1时,整个文件恰被分成一组,算法便终止. 简单插 ...

  6. CentOS7系统上的GPSTK示例代码调试 & 运行结果 & 心得

    下载的源码程序包中,共有16个例子,这里记录它们的调试及运行结果,尤其是哪些可用,哪些不可用,今后使用时用作参考. 总结: (1)在 18 个示例程序中,example16 和 example17 编 ...

  7. mysql:mysql is neither service nor target!?(suse12 sp2 )

    今天想在自己的虚拟机上安装mysql,安装好了并且初始化之后,一直无法启动mysql. 1.service mysql start; 报错:mysql is neither service nor t ...

  8. .NET反射简单应用———遍历枚举字段

    反射(Reflection)是一个非常强大的工具,可以用来查看和遍历类型和类型成员的元数据:动态创建类型实例,动态调用所创建的实例方法.字段.属性:迟绑定方法和属性.此次要介绍的是使用反射查看类型成员 ...

  9. PROJ.4学习——地图投影

    PROJ.4学习——地图投影(坐标系投影) 前言 PROJ是由大量的基础投影库构成.这里主要讨论学习PROJ库的相关参数. 这里大部分是讲如何将3D坐标系投影到2D平面上.投影时,涉及到基准线,单位, ...

  10. I2C 上拉电阻选择计算公式

    I2C接口上拉电阻的选择 - I2C接口上拉电阻的选择 1.I2C接口的输出端是漏极开路或集电极开路,所以必须在接口外接上拉. 2.上拉电阻的范围很宽,但也需要跟据功耗.信号上升时间等具体确定. 和速 ...