----关于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 ...
随机推荐
- onOptionsItemSelected、onMenuItemSelected、onContextItemSelected 区别
1.在点击选项菜单(OptionsMenu:点击menu弹出的菜单)的菜单项时即调用了onMenuItemSelected 也调用了onOptionsItemSelected ,于是疑惑他们 ...
- IDEA—— 找不到或无法加载主类Main
最近使用idea,编写了一个项目,发现老是找不到main,网上找了一大圈的解决方案,都不行.灵机一动升级了jdk就可以了,之前用的是1.7的,换成了1.8的就好了.
- DataBaseDaoAbstract
import java.lang.reflect.Method; import java.math.BigDecimal; import java.sql.PreparedStatement; imp ...
- 涂抹mysql笔记-搭建mysql高可用体系
mysql的高可用体系<>追求更高稳定性的服务体系 可扩展性:横向扩展(增加节点).纵向扩展(增加节点的硬件配置) 高可用性<>Slave+LVS+Keepalived实现高可 ...
- web应用 与 http协议
一.web 应用 Web应用程序是一种可以通过Web访问的应用程序,用户只需要有浏览器即可访问应用程序,不需要再安装其他软件. 应用程序有两种模式C/S.B/S.C/S即客户端—服务端程序这类程序一般 ...
- Spring AOP的底层实现原理
Spring的两大核心之一就是AOP,AOP:面向切面编程.在说原理之前,得先知道一些 AOP的专业术语. AOP的专业术语 连接点(JoinPoint):增强执行的位置(增加代码的位置),Sprin ...
- java细节知识
代码优化细节 (1)尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是fin ...
- python大法好—模块 续
1.sys模块 sys模块的常见函数列表 sys.argv: 实现从程序外部向程序传递参数. sys.exit([arg]): 程序中间的退出,arg=0为正常退出. sys.getdefaulten ...
- c++之&
转自www.cnblogs.com/Mr-xu/archive/2012/08/07/2626973.html 一直以为&是取地址,也看到引用,但是今天才发现引用跟取址完全不是一个意思,&am ...
- Django 重写用户模型
AUTH_USER_MODEL = 'myapp.MyUser' django——重写用户模型 Django内建的User模型可能不适合某些类型的项目.例如,在某些网站上使用邮件地址而不是用户名作为身 ...