css 页面定位position
position的四个属性值
relative
absolute
fixed
static
参看实例
<div id="parent">
<div id='sub1'>sub1</div>
<div id="sub2">sub2</div>
</div>
relative相对定位
relative 属性相对比叫简单,我们要搞清楚它是相对哪个对象来进行偏移的。答案是它本身的位置。
上面的代码中sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置css代码如下
#sub1
{
position:relative;
padding:5px;
top:5px;
left:5px;
}
我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。
但当设置sub1为postion为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,
relative的"相对的"意思也正是体现于此
因此,只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后,就按照它理应在的位置进行偏移
随后的问题是:sub2的位置又在哪里呢?
答案:它原来在哪里,现在就在哪里,它的位置不会应为sub1增加了position的属性而发生改变
如果此时把sub2的position也设置为relative,或发生什么现象?
此时依然和sub1一样,按照它原来的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
absolute绝对定位
有人说position的属性设置为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的,实际上,这是fixed属性的特点。
当sub1的postion设置为absolute后,其到底以谁为对象进行偏移呢。
1)当sub1的父对象(或曾祖父,只要是父级对象) parent也设置了position属性,且position的属性值为absolute或relative时,
也就是说,不是默认值得情况,此时sub1按照这个parent来进行定位。
note: 对象虽然确定好了,但有些细节需要注意,那就是我们到底以parent的哪个定来进行定位呢?
如果是parent设定了margin,border,padding等属性,那么这个定位将忽略padding,
将会从padding开始的地方(即从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法不同。
接下来的问题是:sub2的位置到哪里去了呢?
由于当position设置为absolute后会导致sub1溢出正常的文档流,就像它不属于parent一样,它漂浮了起来,
在DreamWeaver中把它称为"层",其实意思一样。
此时sub2将获得sub1的位置,它的文档流不再基于sub1,而是直接从parent开始。
2) 如果sub1不存在有着position属性的父对象,那么就会以body为定位对象,按照浏览器的窗口进行定位。
fixed固定定位
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位
static静态定位
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列
absolute和fiex的区别
1)absolute的相对位置分为两种情况,在相对于body的情况下
a) 没有滚动条的情况下没有差异
b) 在有滚动条的情况下 fixed定位不会随滚动条移动而移动,而aboslute则会随滚动条移动
css 页面定位position的更多相关文章
- 天坑,CSS之定位Position(六分之五)
Position定位 个人觉得position这个属性真的算是CSS的见面杀了.尤其是absolute,当年可是被虐的不轻.当然了,现在爱上了这个属性,谁用谁知道. position属性 positi ...
- CSS中定位position
毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- CSS:CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- CSS之定位布局(position,定位布局技巧)
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- css之定位(position)
1.什么是定位: css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则 ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
- 探索Java8:(二)Function接口的使用
Java8 添加了一个新的特性Function,顾名思义这一定是一个函数式的操作.我们知道Java8的最大特性就是函数式接口.所有标注了@FunctionalInterface注解的接口都是函数式接口 ...
- Codeforces 788A Functions again - 贪心
Something happened in Uzhlyandia again... There are riots on the streets... Famous Uzhlyandian super ...
- BZOJ1398: Vijos1382寻找主人 Necklace 字符串最小表示法
Description 给定两个项链的表示,判断他们是否可能是一条项链. Input 输入文件只有两行,每行一个由0至9组成的字符串,描述一个项链的表示(保证项链的长度是相等的). Output 如果 ...
- CSS3屏幕密集媒体查询
html { font-size: 50px; } body { font-size: 24px; } @media screen and (max-width: 359px) { html { fo ...
- apiCloud检出代码出现以下图示错误:
问题如下: Initialized empty Git repository in H:/simlpe/.git/ 已经在 H:\simlpe 完成必要的项目初始化工作正在尝试从代码服务器获取数据.. ...
- python学习站点
1.python 外部扩展网址 http://www.lfd.uci.edu/~gohlke/pythonlibs Python Extension Packages 2.web2py学习 http: ...
- Cassandra 和 Spark 数据处理一窥
Apache Cassandra 数据库近来引起了很多的兴趣,这主要源于现代云端软件对于可用性及性能方面的要求. 那么,Apache Cassandra 是什么?它是一种为高可用性及线性可扩展性优化的 ...
- Java字节流实现文件夹的拷贝
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io ...
- Codeforces 913C - Party Lemonade
913C - Party Lemonade 思路:对于第i个话费cost[i],取min(cost[i],2*cost[i-1]),从前往后更新,这样就可以保证第n个的话费的性价比最高,那么从最高位开 ...
- mapStateToProps,mapDispatchToProps的使用姿势
本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载 前言 刚接触redux的时候,发现大家对mapDispatchToProps使用有几种方法,而且都跑通了,本文来介绍下 ...