最熟悉的陌生属性——position
来源:互联网 发布:在线看熊片的软件 编辑:程序博客网 时间:2024/05/01 10:29
最近更新了一下简历,不久,有一个公司发来了面试邀请。于是就过去面试了一下。其中面试官的一个问题(如题),我觉得有必要写进自己的博客。
position:有以下几个属性 static(默认) releative absolute fixed。
总所周知,position的默认属性是 static。所以通常情况下,我们都不写。也因此这个属性很少出现在代码里面。在默认情况下面,如果我们给当前的div加上 left right top bottom z-index这些属性的话。他也同样不会理你。因为该div没有脱离文档流。
小提示:W3C规范中没有document flow这个概念,只有normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。
文档流:元素按照其在 HTML 中的位置顺序决定排布的过程。自左到右,从上到下。依次排列。如果盘列的顺序改变了,那就是脱离了文档流。比如:floate absolute fixed。
一、static(静态定位)
默认属性,请大家自行观看图片与源码。
图示:
具体的展示效果,戳我
二、releative(相对布局)
给box1的div添加一个 one类。并添加以下属性。
.one{ position: relative; top: 50px; left: 50px; /*margin-top: 50px;*/ /*z-index: -1;*/}
可得图示:
可以看到left 和top的值起到作用了。相对于原来位置的右下方偏移了50px。
但是可以清楚的看到,绿色的div它并没有移动到最上面。这是因为红色的div在文档流当中仍然占据着一定的位置。
当你给红色div添加margin属性的话,底下的div也将会向下移动。
另外,这时候你修改z-index的值为-1的话。红色的div将会移动到绿色div的下面。
如果你想实验padding的话,请把box-sizing:border-box;给注释了。或者把padding的值设置成100px以上,就会看见效果
至于原因是因为盒模型,我个人比较偏好IE盒模型。有时间的话,我也会在后面的博客里面讲到。
大家可以点开我,审查元素试试!这就是相对布局。(至于那个辅助的观察线大家不用关注,接下来就是要讲到它)。
三、absolute(绝对布局)
给box1的div添加一个 one类。并添加以下属性。
.one{ position: absolute; top: 50px; left: 50px; /*margin-top: 50px;*/}
可以看到left 和top的值起到作用了。红色的div相对于原来位置的右下方偏移了50px。
更值得注意的是绿色的div已经跑到了文档流的最上面。由此观之,红色的div已经脱离了文档流。
此时你再给红色的div增加margin值,绿色的div是不会有任何反应的。padding的话亦是如此。它就好比定在那里了。不再受文档流的影响。
还有一点值得注意的就是,absolute好比是二哥,他有个大哥是relative。如果子级的div是absolute定位,父级div是relative定位。这样的话,子级的div就会相对父级定位,如果父级没有relative属性的话,absolute就是相对于body标签定位。
.wrapper{ position: relative; margin:100px auto; width: 400px; height: 400px; border:1px solid red; } .wrapper .inner{ position: absolute; left: 0; top: 0; width: 200px; height: 200px; background-color: blue; }----------------我是不完美的分割线--------------------------------<div class="wrapper"> <div class="inner"></div></div>
大家审查元素。取消wrapper的position:relative属性,观看蓝色div的位置变化。
四、fixed(固定布局)
给box1的div添加一个 one类。并添加以下属性。
.one{ position: fixed; right: 0; top: 0; /*margin-top: 100px;*/
红色的div相对于浏览器位置的最右边。同样脱离了文档流,它与absolute最大的区别是 relative将无法对它进行约束。它的布局是跟随浏览器的窗口而来的。它也会有margin属性。大家可以添加上margin。预览一下!
最后说一点:出了static以外。其他的都可以利用z-index进行层级的排序。
关于left top right bottom值的设置有一个小坑,有机会再跟大家说道说道! 0点了 睡觉!
- 最熟悉的陌生属性——position
- String:一个最熟悉的陌生类型
- 【软件开发工具——陌生的熟悉人】
- 熟悉的陌生
- 熟悉的陌生
- 那些最熟悉的陌生人们(不定期更新)
- iOS开发 ☞ 那些最熟悉的陌生方法
- 从陌生到熟悉,再变成最熟悉的陌生人:伤感日志
- 从陌生到熟悉,再变成最熟悉的陌生人:伤感日志
- 从陌生到熟悉,再变成最熟悉的陌生人:伤感日志
- 熟悉又陌生的领域
- 熟悉而又陌生的table
- 熟悉又陌生的udelay
- 熟悉又陌生的HTTPS
- 最熟悉的public,也许就是你最陌生的哦
- “最熟悉的”陌生木马,灰鸽子又来了……
- Android UI学习系列-ActionBar你最熟悉却又陌生的她(上篇)
- 熟悉而又陌生的城市(下)
- LeetCode 104. Maximum Depth of Binary Tree 题解
- 今天开始陆陆续续写博客,做更优秀的程序员
- maven的安装
- Python EOF 的错误
- 码
- 最熟悉的陌生属性——position
- 欢迎使用CSDN-markdown编辑器
- SCOI2012喵星球的点名--后缀数组
- windows7中 安装tensorflow
- iOS开发————数据本地化方式之SSKeychain--基础上进行CBC加解密
- 未名湖边的烦恼
- Mysql之事件小结
- 用<algorithm>头文件中的sort函数排序
- 写在主方法类的变量,在main外面声明该变量要加static修饰~