这是对position讲解最通俗易懂的版本了。
position
为了制作更多复杂的布局,我们需要讨论下 position
属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你最好还是把这页放到书签里。
static
.static {
position: static;
}
static
是默认值。任意 position: static;
的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”。
</div>
relative
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
relative
表现的和 static
一样,除非你添加了一些额外的属性。
</div>
在一个相对定位(position属性的值为relative)的元素上设置 top
、 right
、 bottom
和 left
属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
</div>
fixed
Hello!暂时不要太关注我哦。
</div>
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative
一样, top
、 right
、 bottom
和left
属性都可用。
我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它,这里有它所使用的CSS:
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
一个固定定位元素不会保留它原本在页面应有的空隙。
令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.
absolute
absolute
是最棘手的position值。 absolute
与 fixed
的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static
的元素。
这里有一个简单的例子:
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
这个元素是相对定位的。如果它是 position: static;
,那么它的绝对定位子元素会跳过它直接相对于body元素定位。
这个元素是绝对定位的。它相对于它的父元素定位。
</div>
</div>
这部分比较难理解,但它是创造优秀布局所必需的知识。下一页我们会使用 position
做更具体的例子。
这是对position讲解最通俗易懂的版本了。的更多相关文章
- CSS 属性 - position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...
- CSS属性之position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...
- infer.net 入门2 用一个侦探故事来讲解,通俗易懂
The results look OK, but how do you know that you aren’t missing something. Would a more sophisticat ...
- 详解AJAX工作原理以及实例讲解(通俗易懂)
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- Spring常用注解(讲解的通俗易懂,很透彻)
使用注解来构造IoC容器 用注解来向Spring容器注册Bean.需要在applicationContext.xml中注册<context:component-scan base-package ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
- Linux环境下详细讲解部署MySQL5.7版本
说明: 在本人写作这篇安装MySQL文章时,虽然MySQL已经发布到8.0.17版本,但对于行业来说,主力版本依然是5.7版本.目前在Linux环境默认安装时,大部分已经默认安装到8版本了,所以本人特 ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- 三 APPIUM GUI讲解(Windows版)
本文本转自:http://www.cnblogs.com/sundalian/p/5629386.html APPIUM GUI讲解(Windows版) Windows版本的APPIUM GUI有 ...
随机推荐
- CSS 专业技巧
使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: * { box-sizing: border- ...
- 一个想法(续五):IT联盟创业计划:现阶段进度公示、疑问解答及进行中的计划
前言: 首先今天是元宵节,先祝大伙元宵节快,单纯的快乐! 然后看看开展中的计划: IT联盟创业计划众筹发起:一个想法(续三):一份IT技术联盟创业计划书,开启众筹创业征程 IT联盟创业计划众筹进度:一 ...
- 今天遇到的面试题for(j=0,i=0;j<6,i<10;j++,i++) { k=i+j; } k 值最后是多少?
for(j=0,i=0;j<6,i<10;j++,i++) { k=i+j; } k 值最后是多少? <script type="text/javascript" ...
- devexpress表格控件gridcontrol图片列,按钮列,时间列等特殊列的实现
1.项目中经常会在表格中插入按钮列,图片列,表格列一些非文本的特殊列.如何在devexpress表格控件gridcontrol中实现呢?以下列举一个实现添加图片列,按钮列,时间列,按钮列,开关列的示例 ...
- gridView 主从表实现
1.主要代码: private void Form2_Load(object sender, EventArgs e) { DataTable dt1 = new DataTable("dt ...
- logistic回归和probit回归预测公司被ST的概率(应用)
1.适合阅读人群: 知道以下知识点:盒状图.假设检验.逻辑回归的理论.probit的理论.看过回归分析,了解AIC和BIC判别准则.能自己跑R语言程序 2.本文目的:用R语言演示一个相对完整的逻辑回归 ...
- NSIndexSet 浅析
Cocoa 中提供了两个用于维护区间集合的类型:NSIndexSet和NSMutableIndexSet . 这两个类型容易其名字一样,其区别就在于是否可以修改.这个区别和NSArray的一样,NSI ...
- p1154 地平线
题目描述 Farmer John的牛们认为,太阳升起的那一刻是一天中最美好的,在那时她们可以看到远方城市模糊的轮廓.显然,这些轮廓其实是城市里建筑物模糊的影子. 建筑物的影子实在太模糊了,牛们只好把它 ...
- UITableView多层展开与收起
规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展 ...
- 深入理解ajax系列第三篇——头部信息
前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会 ...