从【 two1-4 】分别为absolute,fixed,static,relative标签

四个标签下位移值相同,【 two2 】和【 two1 】都出现在左上角,【 two2 】 盖住了【 two1 】

附上部分源代码:

  HTML:

    <div class="box" id="one">One</div>
    <div class="box" id="two1">Two1</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>

  CSS:

    .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #ff8353;
    color: white;
    }

    

    #two1 {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #452589;
    }

    body
    {
    height:4000px;
    }

two4 】为relative标签,出现在正常流当中,能设置位移

two3 】为static标签,出现在正常流当中,不能设置位移

two2 】为fixed标签,不出现在正常流当中,不能设置位移,随页面滚动

two1 】为absolute标签,不出现在正常流当中,能设置位移

如图的【 two2 】为fixed标签页面滑动效果

----关于position的四个标签----的更多相关文章

  1. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. position的四个属性值

    1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> <div id="s ...

  3. Git学习笔记(四)标签和搭建Git服务

    一.标签是什么 发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一 ...

  4. struts1四:常用标签

    struts1支持的5种标签: HTML 标签: 用来创建能够和Struts 框架和其他相应的HTML 标签交互的HTML 输入表单 Bean 标签: 在访问JavaBeans 及其属性,以及定义一个 ...

  5. kendo chart label position 图表的值标签位置及显示模板

    1.不显示0 seriesDefaults: { type: "column", labels: { visible: true, position:'' background: ...

  6. position的四种定位方式:static、fixed、relative、absolute

    position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  固定定位 是相对于浏览器窗口来进行定位: ...

  7. mybatis学习 十四 resultMap标签 一对一(联合查询)

    1.使用 resultMap 实现关联单个对象(联合查询方式) <resultMap type="Student" id="stuMap1"> &l ...

  8. django第四课 标签的用法(if/else、for、ifequal、过滤器、注释等)

    if/else {% if %} <p>内容</P> {% endif %} {% else %}是可选标签 {% if %} <p>内容</P> {% ...

  9. GitHub笔记(四)——标签管理

    五 标签管理 1 打标签.默认master $ git tag v1.0 要对add merge这次提交打标签,它对应的commit id是f52c633,敲入命令: $ git tag v0.9 f ...

随机推荐

  1. 洛谷P1636学画画

    传送 这个题我们需要一个大胆的想法(虽然AC后看了题解知道这是个定理) (求证明qwq) 如果一个图有2或0个奇点,它就一定可以一笔画出,如果不是2或0个奇点,那答案就是奇点数/2 (私认为因为两个奇 ...

  2. [转][C#]Linq 的扩展方法

    public static class LinqEx { public static IEnumerable<TResult> LeftExcludingJoin<TSource, ...

  3. WindowsServer2012R2开机进入CMD,关闭后黑屏问题

    原因分析: 因为自己在卸载IIS的时候,不小心卸载了.net framework,系统没有了图形界面(由完整模式Full变为了核心模式core),需要重新恢复.net framework4.5. 解决 ...

  4. [转]IIS 日志记录时间和实际时间 不一样

    今天偶然发现 2003 系统IIS 日志记录时间和实际时间总是差了8个小时,也就是慢了8个小时.苦苦找了半天才发现如下办法能解决 ,特发来分享下 解决1:如果 IIS日志记录默认使用的是W3C扩展日志 ...

  5. Java内存列表

    当jvm运行起来的时候,它会向系统申请一片内存区,并将这块内存分出一部分存储程序创建的对象,传递给方法的参数,返回值,局部变量等等,我们将这块内存称之为“运行时数据区”. 初学的时候把Java内存分为 ...

  6. FPGA editor 的使用之一 ------ Probe探针

    做FPGA设计经常会用到FPGA editor工具,今天开始总结下使用FPGA editor工具的经验. 1.添加probes 在debug时,经常要分析设计中的某一个信号的状态变化,需要观测这个信号 ...

  7. 10-安装es

    1.安装jdk(jdk要求1.8.20或1.7.55以上) 2.上传es安装包 3.解压es tar -zxvf elasticsearch-2.3.1.tar.gz -C /opt/app/ 4.e ...

  8. Python入门教程丨1300多行代码,让你轻松掌握基础知识点

    欢迎关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练.PDF电子文档.面试集锦.学习资料等. 前言 本文适合有经验的程序员尽快进入Python世界.特别地 ...

  9. [Oracle,2018-03-02] oracle一次插入多条记录

    insert into student(name,age) ' from dual union all ' from dual union all ' from dual 在oracle中不能像mys ...

  10. ubuntu vsftp

    转自:https://www.cnblogs.com/java-synchronized/p/6935711.html 12点多了,擦!做个码农真不容易呀! 系统:Ubuntu16.04 安装:FTP ...