文档章节

CSS Position学习

路小磊
 路小磊
发布于 2015/01/09 18:22
字数 469
阅读 172
收藏 16

介绍

CSS Position有四个属性:

  1. relative
  2. absolute
  3. fixed
  4. static(默认)

样例

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

sub1和sub2是同级关系,parent是它们的父级元素。

1. relative(相对定位)

相对定位指的是相对于这个元素原位置的定位,且会占住原来的位置。

所谓原位置指不设置relative属性时它的位置(既static属性时的位置)

relative偏移相对的是margin的左上侧。

例如对sub1设置relative属性后,会根据top,right,bottom,left属性偏移,而sub2的位置不变(sub1会占住原来的位置)

relative_sub1

再对sub2设置relative属性,它也会相对其原来的位置偏移(sub2位置还会被占着)

relative_sub1

2. absolute(绝对定位)

绝对定位是根据其最近进行定位的父对象的 padding 的左上角进行定位,基本分为以下两种情况:

  1. 例如对sub1设置absolute,如果sub1的父级元素(parent或者其父级元素)设置了absolute或relative,那么sub1就会相对这个父元素定位。
  2. 如果父级元素都没有设置absolute或relative,那sub1相对body定位。

这时由于sub1的位置“腾出来了”,sub2就会跑到sub1的位置(也可以理解sub1浮起来了,dreamweaver中叫做层),它的文档流就会基于parent。

absolute_sub1

如果再对sub2设置absolute,那其也是相对parent的。

absolute_sub2

3. fixed

fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

4. static(默认)

position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。


参考:

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

http://www.w3school.com.cn/css/css_positioning.asp

© 著作权归作者所有

共有 人打赏支持
路小磊

路小磊

粉丝 324
博文 53
码字总数 40548
作品 5
乌海
程序员
私信 提问
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
05/11
0
0
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
0
0
web前端小案例-爱新鲜抽屉式特效

用简短的javascript代码编写出爱新鲜抽屉式特效 知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等。 ?...

急速奔跑中的蜗牛
2017/12/04
0
0
谈谈面试与面试题

来源:wintercn,作者微博:@寒冬winter 起因,某日电话面试之后满心郁闷的我发了两条微博: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺...

2013/05/06
0
0
CSS3 表单验证

今天从网上看到一篇介绍CSS表单验证的文章,感觉很有意思,摘抄下来,学习学习。

musishui
2016/06/22
6
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
3
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
1
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
3
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
3
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部