[CSS]CSS Position 详解
一. CSS position 属性介绍
CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。
二. position: static
static：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。
所以对元素position属性设定static时，left属性不起作用，但是元素出现在正常的流中。
三. position: fixed
fixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。
窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。
四. position: relative
reletive：元素相对其自己正常位置定位，元素在正常的文档流中。
没有设置left和top时的正常位置。
设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素预留的空间保持正常流动，也就是不会对其他元素产生影响。
五. position: absolute
absolute：元素绝对定位，相对于static定位以外的第一个父元素，元素脱离文档流。
所以会找到static定位以外的第一个父元素，因为span的父元素content和container都没有设置position属性，默认为static，找到的第一个父元素就为html<body>，相对于<body>向左移动100px。
如果对content或container设置position属性为relative，absolute或fixed，span会相对于content或container来定位。
以下是三个例子，
span元素的第一个position属性不为static的父元素是content，所以相对于content向左移动10px。
当content属性设置为fixed时，span元素相对于content向左移动10px。
span元素第一个position属性不为static的父元素是container，所以相对于container向左移动10px。
六. 总结
position: static，元素出现在正常的流中，无法通过left，right，top和bottom设置元素定位。
position: fixed，元素脱离文档流，相对于浏览器窗口定位不变。
position: relative，元素出现在正常的流中，相对于其正常位置定位。
position: absolute，元素脱离文档流，相对于static以外的第一个父元素定位。
理解了position的属性，可以更好的设计页面和实现页面。
[CSS]CSS Position 详解的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...
- CSS之Position详解
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...
- [TimLinux] CSS float和position详解
1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...
- CSS绝对定位absolute详解
转:https://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- [转]CSS vertical-align属性详解 作者：黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS定位之position详解(转载)
本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html position属性 在前端中,position是很常见的属性.通过这 ...
- CSS定位之position详解
position属性 在前端中,position是很常见的属性.通过这个属性可以调整dom元素在浏览器中显示的位置. 它有几个常用的属性: static 默认值.通常是在覆盖absolute或者rel ...
随机推荐
- LeetCode No.97,98,99
No.97 IsInterleave 交错字符串 题目 给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的. 示例 输入: s1 = "aabcc&qu ...
- day24-练习
#17.有四个数字:1 2 3 4 ,能组成多少个各不相同且数字不重复的三位数?各是多少? count = 0 for i in range(1,5): for j in range(1,5): fo ...
- python学习笔记（24）-类与对象
#类与对象 #python类的语法 关键字 class #class 类名 类名的规范是:数字字母下划线组成,不能以数字开头 首字母大写 驼峰命名 #类属性 放在类里面的变量值 #类方法 放在类里面的 ...
- iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码
iOS精选源码 MXScroll 介绍 混合使用UIScrollView ios 电商demo(实现各种常见动画效果和页面布局) 一行代码集成微信悬浮窗 可拖动,大小的视图,可放置在屏幕边缘. 在使用 ...
- [LC] 108. Convert Sorted Array to Binary Search Tree
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. Fo ...
- 吴裕雄--天生自然 R语言开发学习：使用键盘、带分隔符的文本文件输入数据
R可从键盘.文本文件.Microsoft Excel和Access.流行的统计软件.特殊格 式的文件.多种关系型数据库管理系统.专业数据库.网站和在线服务中导入数据. 使用键盘了.有两种常见的方式:用 ...
- deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings
1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...
- Welcome to Fan Ouyang’s website!
Welcome to Fan Ouyang's website! 欧阳璠,哲学博士,湖南娄底人. 目前为浙江大学教育学院课程与学习科学系教育技术专业百人计划研究员. 2013-2018年 明尼苏达大学 ...
- java的自增和自减
class Untitled { public static void main(String[] args) { int a = 3; int b = a++; //a先赋值给b,然后a再自己加1 ...
- Python Web 基础向（四） 浅谈数据层
数据层一般会给人带来一些困扰,在于其定位不准确.聚合Model的工作也可以放在逻辑层做,但会导致逻辑层变重,经常出现大段晦涩代码.因此我的建议是保留Model聚合层,尽管会导致工作量的略微增加,但却可 ...