----关于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 ...
随机推荐
- 队列&广搜
搜索里有深搜,又有广搜,而广搜的基础就是队列. 队列是一种特殊的线性表,只能在一段插入,另一端输出.输出的那一端叫做队头,输入的那一端叫队尾.是一种先进先出(FIFO)的数据结构. 正经的队列: 头文 ...
- Consul之:服务注册与发现
一.服务的管理(注册与发现)有三种方式: 1:通过配置文件的方式静态注册2:通过HTTP API接口来动态注册(spring cloud使用方式,spring cloud中使用的是consul api ...
- Kong安装教程(v1.0.2)
使用的软件 Unbuntu 虚拟机(有自己的服务器更好) PostgreSQL kong kong-dashboard docker spring boot 安装 PostgreSQL kong 需要 ...
- 使用docker compose编排容器
一.安装docker compose 二进制包安装 1.安装 Docker Compose 从 官方 GitHub Release 处直接下载编译好的二进制文件即可 # curl -L https:/ ...
- Pycharm2018的激活方法或破解方法(必须加host)
修改hosts文件将0.0.0.0 account.jetbrains.com添加到hosts文件最后,注意hosts文件无后缀,如果遇到无法修改或权限问题,可以采用覆盖的方法去替换hosts文件 修 ...
- Ajax提交from表单
一,使用Ajax提交form表单到后台传参问题 1,首先,定义一个form: <form class="form-horizontal" role="form&qu ...
- html 之 <meta> 标签之http-equiv
语法规则: <meta http-equiv=“参数” content=“参数值” > 1.X-UA-Compatible 文档兼容模式的定义 <meta http-equiv=“X ...
- 八(第二篇)、主体结构元素——nav元素、aside元素
nav元素 nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分. 并不是所有的链接组都要被放进nav元素,只需要将主要的.基本的链接组放进nav元素即可. na ...
- Android 开发 创建WiFi、WiFi热点 ---开发集合
WIFI 权限 <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> < ...
- hadoop distcp hdfs://ns1/aaa hdfs://ns8/bbb UnknownHostException: xxx 两个高可用(ha)集群间distcp 如何识别两个集群逻辑名称
在要执行distcp 的客户端配置添加 dfs.internal.nameservices 指local service 就是client 所在的hadoop 的逻辑名称 <!-- servic ...