----关于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 ...
随机推荐
- HTTP Protocol - URI
Uniform Resource Identifier (URI): compact sequence of characters that identifies an abstract or phy ...
- [UE4]CheckBox
一.CheckBox默认情况下是比较小的 二.要让CheckBox变大,最简单的方法就是直接设置Transform.Scale,但如此一来CheckBox就变得模糊了. 三.CheckBox控件是在C ...
- eclipse开发Java web工程时,jsp第一行报错,如何解决?
与myeclipse不同,eclipse开发java web项目时是要下载第三方软件(服务器)的,正是这个原因,很多初学者用eclipse学习java web的时候,总是会遇到一些小问题.其中常见的一 ...
- [NOI2011]智能车比赛 (计算几何 DAG)
/* 可以发现, 最优路径上的所有拐点, 基本上都满足一定的性质, 也就是说是在矩形上的拐角处 所以我们可以把他们提出来, 单独判断即可 由于我们提出来的不超过2n + 2个点, 我们将其按照x坐标排 ...
- C# 数字转换成大写
/// <summary> /// 数字转大写 /// </summary> /// <param name="Num">数字</para ...
- 深入学习 Java 序列化
前言 对于Java的序列化,一直只知道只需要实现Serializbale这个接口就可以了,具体内部实现一直不是很了解,正好这次在重复造RPC的轮子的时候涉及到序列化问题,就抽时间看了下 Java序列化 ...
- 国内+海外IDC资源合作
主营业务:服务器租用.托管.机柜大带宽.安全防御.云主机.海外专线.海外托管.CDN加速.站群 资源覆盖: 华南:广东东莞.深圳.广州.湛江.福建厦门.泉州.福州 华北:北京.天津.山东 华东:江苏苏 ...
- python3爬虫入门程序
适用于有且只有一点Python3和网页基础的朋友,大牛&路人请绕道 (本文很多废话,第一次在网上长篇大论,所以激动的停不下来,如果有大佬路过,也希望不要直接绕道,烦请指点一二) 感谢博客园给了 ...
- 《从零玩转python+人工智能-3》网易云课堂王顺子
#1.145——152节课25章——面向对象三大特性小案例 class Animal: def __init__(self,name,age=1): self.name = name self.age ...
- sys模块的介绍
sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取 ...