----关于position的四个标签----
从【 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的四个标签----的更多相关文章
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- position的四个属性值
1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> <div id="s ...
- Git学习笔记(四)标签和搭建Git服务
一.标签是什么 发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一 ...
- struts1四:常用标签
struts1支持的5种标签: HTML 标签: 用来创建能够和Struts 框架和其他相应的HTML 标签交互的HTML 输入表单 Bean 标签: 在访问JavaBeans 及其属性,以及定义一个 ...
- kendo chart label position 图表的值标签位置及显示模板
1.不显示0 seriesDefaults: { type: "column", labels: { visible: true, position:'' background: ...
- position的四种定位方式:static、fixed、relative、absolute
position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed 固定定位 是相对于浏览器窗口来进行定位: ...
- mybatis学习 十四 resultMap标签 一对一(联合查询)
1.使用 resultMap 实现关联单个对象(联合查询方式) <resultMap type="Student" id="stuMap1"> &l ...
- django第四课 标签的用法(if/else、for、ifequal、过滤器、注释等)
if/else {% if %} <p>内容</P> {% endif %} {% else %}是可选标签 {% if %} <p>内容</P> {% ...
- GitHub笔记(四)——标签管理
五 标签管理 1 打标签.默认master $ git tag v1.0 要对add merge这次提交打标签,它对应的commit id是f52c633,敲入命令: $ git tag v0.9 f ...
随机推荐
- EasyMock 模拟对象测试
一.EasyMock 使用动态代理实现模拟对象创建,一般可以满足以下测试需求 1.要测试的模块依赖于其它自己控制不了的模块,如第三方服务,其它组员在开发的服务等,它们都没办法配合你来测试: 2.涉及到 ...
- 学习笔记之Problem Solving with Algorithms and Data Structures using Python
Problem Solving with Algorithms and Data Structures using Python — Problem Solving with Algorithms a ...
- json 中关于json数组跟json对象的区别
原文地址:http://blog.csdn.net/lafengwnagzi/article/details/52789171 JSON 是存储和交换文本信息的语法 JSON 文本格式在语法上与创建 ...
- 一切为了落地,为什么要把PP.io设计成三个阶段!
之前的一篇文章,我讲解了PP.io的三个阶段:“强中心”,“弱中心”,“去中心”.今天来解释下,我为什么要分三个阶段逐步实现PP.io去中心化存储网络: 简单地说,就是在区块链不可能三角理论中,我暂时 ...
- 异步启动solidworks
两种方法: SldWorks App = new SldWorks(); App.Visible = true; //SldWorks.Application.24是2016 // App = (Sl ...
- vi 常用 文本编辑 技巧
归纳常用的Vi/Vim 文本编辑技巧,便于以后查阅. 一.把空格替换为换行 :% s/ /\r/g 二.把空行删除 :g/^$/d 三.vim以16进制打开和编辑文件 先用vim以二进制格式打开需要编 ...
- java UCnter 单点登录 对接。
前提 PHP项目要部署成功.论坛能正常访问. 先配置 应用 1.是论坛应用 4.是java服务器,也就是你java登录的项目. 必须通信成功. .主应用IP就是你java项目的入口. 例如:http: ...
- 分布式计算课程补充笔记 part 1.5
▶ 编写 SLURM 脚本 #!/bin/bash #SBATCH -J name # 任务名 #SBATCH -p gpu # 分区名,可为 cpu 或 gpu #SBATCH -N # 节点数 # ...
- python函数-基础篇
函数 为什么要用函数?1.减少代码冗余2.增加代码可读性 函数的定义及使用 def info(): # 这里我们定义一个打印个人信息的函数 name = "xiaoming" ag ...
- idea搭建Eureka注册中心
服务的注册与发现 关系调用说明: 服务生产者启动时,向服务注册中心注册自己提供的服务 服务消费者启动时,在服务注册中心订阅自己所需要的服务 注册中心返回服务提供者的地址信息个消费者 消费者从提供者中调 ...