----关于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 ...
随机推荐
- kafuka资料学习
http://blog.csdn.net/hmsiwtv/article/details/46960053
- 廖雪峰Java6 IO编程-2input和output-6classpath资源
1.从classpath读取文件可以避免不同环境下文件路径不一致的问题. Windows和Linux关于路径的表示不一致 Windows:C:\conf\default.properties Linu ...
- Chapter4 复杂度分析(下):浅析最好,最坏,平均,均摊时间复杂度
四个复杂度分析: 1:最好情况时间复杂度(best case time complexity) 2:最坏情况时间复杂度(worst case time complexity) 3:平均情况时间复杂度( ...
- 性能测试Jmeter扩展学习-添加自定义函数
我们在使用jmeter的时候有时候会碰到jmeter现有插件或功能也无法支持的场景,比如前端加密,此时我们就需要自己手动编写函数并导入了,下面就是手动修改并导入的过程. 首先我们需要下载jmeter源 ...
- (Python基础)2 or 3?
对于大部分初学者来说,该选择Python2.x还是Python3.x?我想这个问题都是普遍初学者的疑问.我的回答当然是学Python3.x的啦.因为下面有段官方原话是这样子说的 ,大概意思呢就是Pyt ...
- Struts vs spring mvc
1. 机制.spring mvc 的入口是servlet, 而struts是filter(这里要指出,filter和servlet是不同的.以前认为filter是servlet的一种特殊),这样就导致 ...
- python自带的进程池及线程池
进程池 """ python自带的进程池 """ from multiprocessing import Pool from time im ...
- jdk 8 日期处理。
ZoneId id = ZoneId.systemDefault(); LocalDateTime dateTime = LocalDateTime.now(id); System.out.print ...
- EasyARM-iMX283A的U盘使用教程
在编写代码前我们先来EasyARM-iMX283A对U盘使用的操作. 我们先拿一个U盘进行格式化 在U盘中写一些文件保存后,弹出U盘. 将U盘插入EasyARM-iMX283A的开发板. [注意]Ea ...
- Garbage Disposal(模拟垃圾装垃圾口袋)
Garbage Disposal Description Enough is enough. Too many times it happened that Vasya forgot to dispo ...