从【 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. centos7安装 owncloud注意事项

    要关于selinux 用来存放文件的目录权限要修改 chown -R apache:apache my.cnf里的binlog_format=mixed前面的注释去掉,不然报mysql错!

  2. (转)cenntos 安装mongodb

    转自 https://www.cnblogs.com/layezi/p/7290082.html 安装前注意: 此教程是通过yum安装的.仅限64位centos系统 安装步骤: 1.创建仓库文件: 1 ...

  3. webpy 解决中文出现UnicodeDecodeError: 'ascii' codec can't decode byte 问题

    1.问题描述:一个在Django框架下使用Python编写的定时更新项目,在Windows系统下测试无误,在Linux系统下测试,报如下错误: ascii codec can't decode byt ...

  4. 关于连接oracle工具plsql的一些使用

    上面图片是打开客户端PL\SQL devepoper的连接内容 进入页面后就可以进行相关的sql语句编写了 将几个结果放入一个表中 select 30+30 as 结果 from dual union ...

  5. fastjson的@JSONField注解

    @JSONField作用:在字段和方法上1.Field:@JSONField作用在Field时,name可以定义输入key的名字,反序列化的时 值不会赋值到属性上2.作用在setter和getter方 ...

  6. ELK+Beats日志分析系统部署

    一.            名词介绍: E:ElasticSearch 搜索,简称es L:Logstash 管理日志和事件的工具 K:Kibana 功能强大的数据显示客户端 Beats 轻量级数据传 ...

  7. C++学习基础十六-- 函数学习笔记

    C++ Primer 第七章-函数学习笔记 一步一个脚印.循序渐进的学习. 一.参数传递 每次调用函数时,都会重新创建函数所有的形参,此时所传递的实参将会初始化对应的形参. 「如果形参是非引用类型,则 ...

  8. 深度学习原理与框架-Tensorflow卷积神经网络-cifar10图片分类(代码) 1.tf.nn.lrn(局部响应归一化操作) 2.random.sample(在列表中随机选值) 3.tf.one_hot(对标签进行one_hot编码)

    1.tf.nn.lrn(pool_h1, 4, bias=1.0, alpha=0.001/9.0, beta=0.75) # 局部响应归一化,使用相同位置的前后的filter进行响应归一化操作 参数 ...

  9. IDEA 工具从Json自动生成JavaBean

    1.先安装GsonFormat插件:File-->Setting-->Plugins-->GsonFormat-->OK 2.new 一个新的Class空文件,然后 Alt+I ...

  10. java引用

    java1.2之后将引用分为强引用(Strong Reference).软引用(Soft Reference).弱引用(Weak Reference).虚引用(Phantom Reference)4种 ...