----关于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 ...
随机推荐
- Oracle + Mybatis批量插入数据,xml.mapper种的写法
1,把表中去年所有的信息全部复制作为今年的数据,即查询出去年所有的数据然后复制插入 <insert id="cover" parameterType="java.l ...
- 1DAY centos 7.4 u盘安装、网络安装
0xff01 重庆大学开源下载centos 1.下载地址 http://mirrors.cqu.edu.cn/CentOS/7.4.1708/isos/x86_64/ 选择 CentOS-7-x86 ...
- SQLServer 清空某个库所有表
select @n=1 insert #temp(tablename) SELECT distinct sobjects.name FROM sysobjects sobjects WHERE sob ...
- mysql Mac篇
默认为mysql下载和安装完毕,安装为默认安装 下载地址:https://dev.mysql.com/downloads/file/?id=473576 1.启动mysql sudo /usr/loc ...
- Android Studio 加载网络图片
Android Studio是基于gradle的一个Android开发软件,在引用网络图片的时候需要连接第三方库,这里介绍 引用glide的方法. 一.在github页面搜索glide,点击第一个 二 ...
- WebService . Schema约束
1. namespace 相当于schema文件的id 2. targetNamespace属性 用来指定schema文件的namespace的值 3. xmlns属性 引入一个约束, 它的值是一个s ...
- gentoo 图像方面的软件
图像方面的软件一般包括:查看图像,屏幕截图,图像修改. 查看图像简单的可以安装 feh,但是 feh 一般作为墙纸来用.稍微好一些的是 gqview. 屏幕截图可以用 screengrab,使用的时候 ...
- python大法好——面向对象
python大法好——面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没 ...
- 【Noip模拟 20160929】选数
题目描述 现在有一排共N个数,你需要从中选出恰好K个.选出K个数后,计算它们两两差值的绝对值的最小值S.你需要确定选出哪K个,才能最大化这个S. 输入数据 输入第一行两个正整数N.K,含义如上. 输入 ...
- unable to auto-detect email address
git错误:unable to auto-detect email address 2017年11月14日 08:51:08 陈君豪 阅读数:7914 idea 用git更新的时候报错,详细错误信 ...