从【 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. zabbix监控windows服务器

    Zabbix agent 在windows上安装部署 1.  下载与解压 地址: http://www.zabbix.com/downloads/2.4.0/zabbix_agents_2.4.0.w ...

  2. 通过eclipse打开jdk native源码

    1.下载 eclipse http://www.eclipse.org/downloads/eclipse-packages/ 建议下载 Eclipse IDE for Eclipse Committ ...

  3. PHP chdir函数:改变当前的目录

    PHP chdir函数的作用是改变当前的目录,这里主机吧详细介绍下chdir函数的用法,并列举使用chdir函数的例子. chdir定义和用法: chdir() 函数改变当前的目录. chdir实例: ...

  4. JAVA使用log4j(另SSM框架中使用log4j)

    1.引入jar包 log4j-1.2.13.jar 2.src下建立配置文件:log4j.properties #不+All,只写后一种LOG log4j.rootLogger =ALL,system ...

  5. 概念吓死人的webservice

    前倾提要:这是我七拼八凑,自己用手打出来的头一篇了!都是别人的想法,我抄袭的,我坦白,我这只是总结一下觉得有用的 本来题目想叫(1)REST API 和WebService(2)REST 样式和 SO ...

  6. 7-安装Spark

    1.Apache Hadoop2.7中的YARN与JAVA8有冲突,如果想要使用spark on yarn,首先需要在yarn-site.xml中配置如下项: <property> < ...

  7. scp和sftp常用操作

      文件异地直接复制: scp SCP的全称是secure copy (remote file copy program),此命令是openssh-clients附带的,它的作用就是在机器之间实现拷贝 ...

  8. python常见用法

    1.冒泡排序 a = [25,15,47,36,44,455,67,234,7,8,-47] def sortport(): for i in range(len(a)-1): for j in ra ...

  9. 杰克.多西 twitter创始人 必做清单和不必做清单

    必做清单 活在当下 接受脆弱(Be vulnerable) 只喝柠檬水和红酒 每天 6 组下蹲和俯卧撑 每天跑步 3 英里 每天思考本清单 站直了 打拳击沙袋 10 分钟 跟所有人打招呼 每天 7 小 ...

  10. leetcode160

    /** * Definition for singly-linked list. * public class ListNode { * public int val; * public ListNo ...