css之position
source link: http://www.poetries.top/2016/08/20/css%E4%B9%8Bposition/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
css之position
Created at 2016-08-21 Updated at 2017-01-06 Category Front-End Tag CSS
在学习position
之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求
如果没有定位,我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin
和padding
调整一下间距,还有就是通过float
来浮动某些元素。做一些简单的网页这样就够了,例如N
年之前的yahoo
,虽然现在看来很low
但是有些情况下,这种按部就班的网页排版满足不了我们的要求,我们需要某些元素跑出来,悬浮在网页上面,而且需要给它指定一个位置。这时候我们就需要用到了position
,而且是非用不可。
relative
position
一共有四个可选属性:static/relative/absolute/fixed
。其中static
(静态定位)是默认值,即所有的元素如果不设置其他的position
值,它的position
值就是static
relative
会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。这是relative
的要点之一。还有第二个要点,就是relative
产生一个新的定位上下文
absolute
absolute
元素脱离了文档结构。和relative
不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来,float
元素也会脱离文档结构)absolute
元素具有“包裹性”。之前<p>
的宽度是撑满整个屏幕的,而此时<p>
的宽度刚好是内容的宽度absolute
元素具有“跟随性”。虽然absolute
元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置top
、left
的值absolute
元素会悬浮在页面上方,会遮挡住下方的页面内容
注意:
- 设置
absolute
会使得inline
元素被“块”化 - 设置
absolute
会使得元素已有的float
失效。不过float
和absolute
同时使用的情况不多 - 上文提到了
absolute
会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”
fixed
其实fixed
和absolute
是一样的,唯一的区别在于:absolute
元素是根据最近的定位上下文确定位置,而fixed
永远根据浏览器确定位置
定位上下文
relative的定位
relative
元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素
fixed的定位
fixed
元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化
absolute的定位
absolute
的定位相对于前两者要复杂许多。如果为absolute
设置了top
、left
,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed
的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK