admin管理员组文章数量:1606667
可能对CSS 稍微有点了解的人都知道position这个属性,妈蛋不就一个position么,有毛可说的。可别小看position,position属性有那几个值,这个可是facebook 面试的第一个问题,你真能回答出来么?
文字前面简单介绍了基础内容,如果你有兴趣试着回答下后面成人版的问题。
儿童版
position属性有几个值只是开始,当你回答之后肯定会继续让你说一说详细的,但是首先你要说出有那几个值。
static
relative
absolute
fixed
sticky
还有一个inherit不放在一起是因为这个值的意思是继承父元素的属性,所以就不放在一起讨论了。
static
static为默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
这里要注意的是z-index只在定位的元素上生效,有时候你发现z-index无效很可能就是因为没进行position定位。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。位移后并不影响其他元素的位置。
一般不考虑兼容性的话推荐时候translate3d来进行位移。
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
sticky
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
成人版
当position:absolute的所有父元素均为static的时候是相对于谁定位的呢?
当top bottom left right 同时出现会出现什么情况呢?
position:absolute 和 float 的区别是什么?
top:100% 和 left:100% 是相对于谁的,margin-left:100% 和 margin-top:100% 又是相对于谁呢?
版权声明:本文标题:在html中 position默认值,CSS 中的 position 属性 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728506154a1161455.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论