html 元素定位position-relative, absolute, fixed, static
看到这个,你有什么想法?
Difference between static and relative positioning
如果你能完全看明白,那几本上css 元素定位的东西基本都会了。本文也不用往下看了。
自己接触web这么多年,虽说前端有接触过,但还是没有系统地学习过,和完整的实践过。很多东西是似懂非懂。其实这里就是问题的关键所在。
似懂非懂,其实本质上是不懂的。但是却又自以为懂, 这就是自己给自己设定了个障碍,这个障碍看似无形却比有形的障碍更可怕。因为每个人似乎
总是自以为是的认为自己认定的东西就是对的。因此很难,放空或者说归零, 来从头开始系统完整的学习一个新的东西。造成对新事物的理解总是停留
在陈旧的水平,故步自封。否定也许是进步的开始!!
------------------------------------------------------------------------------------------------
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left
, top
, right
and bottom
rules:
Relative positioning allows you to specify a specific offset (left
, top
etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div
I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div
:
There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:
And when a position: relative
is applied to a parent element in the hierarchy:
Note how our absolutely-position element is bound by the relatively-positioned element.
And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:
You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:
Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:
..unless of course your parent element uses overflow: ?
to determine the behaviour of the scroll (if any).
With absolute positioning and fixed positioning, the elements are taken out of HTML flow.
html 元素定位position-relative, absolute, fixed, static的更多相关文章
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css的定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS之定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
- 对于position:relative,absolute,fixed的见解:
1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- What is the difference between position: static,relative,absolute,fixed
What is the difference between static,relative, absolute,fixed we can refer to this link: expand
- (转)Position定位:relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
- 网页元素定位Position
第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位 (一般不用) stati ...
随机推荐
- 解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号
解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...
- 二分 || UOJ 148 跳石头
L距离中有n块石头,位置在d[i], 移走m块,使从起点0跳到终点l时,每次跳跃的最小距离最大,求这个最小距离 *解法:想到二分(想不到),对要求的结果进行二分,于是对最小距离二分== #includ ...
- xlsx 读取文件日期问题
xlsx 的版本:0.13.5,可以取到日期 xlsx 的版本:0.14.3,取到的日期转为数字了,没有找到方法转为日期, 可以开启 cellDates: true,但是这个时区不对, dateN ...
- C#中byte类型运算
首先看下面一段代码 byte x = 1; byte y = 2; byte z = x + y; Console.WriteLine(z); 可能很多人会说显示结果是3. 其实,这段代码无法运行,因 ...
- hdu 6441 Find Integer(费马大定理+勾股数)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6441(本题来源于2018年中国大学生程序设计竞赛网络选拔赛) 题意:输入n和a,求满足等式a^n+b^ ...
- 2019天梯赛练习题(L2专项练习)
7-2 列出连通集 (25 分) 给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序 ...
- python基础003
1. list 1.1 基础 list是一组有序的集合序列,可以包含任何类型且不必相同,并支持嵌套.采用如下创建方式: li = ["spam",2.0,5,[10,20]] 列表 ...
- POJ 2342 Anniversary party (树形DP入门)
题意: 给定一个上下属的关系树, 每个人有一个活跃值, 现在要参加一个派对, 每个人都不会和自己的上属参加派对(上属参加了,下属就不能参加了), 求参加派对的最大活跃值 分析: 枚举每个节点取与不取得 ...
- C#基于引用创建单链表
在C语言,单链表的实现依赖指针,指针用来指向节点,那么,用C#实现,自然就想到引用,节点的引用不就类似于指向Node的指针嘛
- idea 中的svn的使用
http://www.cnblogs.com/whc321/p/5669804.html 很详细