偏移属性和index属性对static无效
来源:互联网 发布:天龙八部男的染发数据 编辑:程序博客网 时间:2024/06/15 12:15
写导航栏时遇到一个有意思的问题.如图上的">", 我在float的基础上用margin-right进行调整,当时脑洞(mi)大(hu)开,想用right会有什么效果?试了一下,两者效果一样。 那么什么时候用right和margin-right呢?
翻了下MDN:
A positioned element is an element whose computed position property is either relative
, absolute
, fixed
or sticky
.
A relatively positioned element is an element whose computed position property is relative
.
An absolutely positioned element is an element whose computed position property is absolute
or fixed.
A stickily positioned element is an element whose computed position property is sticky
.
The top
, right
, bottom
, and left
properties specify the position of positioned elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
relatively positioned和stickily positioned 就是看是否使用对应的relative和sticky.
显然,定位元素囊括了除static之外的3种常见定位:相对定位+绝对定位+固定定位,以及sticky.
(sticky可能比较陌生, 可以看下sticky在处理页脚中的运用http://www.cssstickyfooter.com/cn/)
这3中常见定位分别可对应4种值:
相对定位即是position:relative;
绝对定位即是position:absolute 或 position:fixed
而top/right/bottom/left值只对设定这3种常见定位的元素有效.顺便说下,顺便说下,z-index也只对定位元素有效.
绝对定位元素=绝对定位+固定定位
以right为例,The right
property has no effect on non-positioned elements. 排除了定位元素之外的,剩下的非定位元素应该就是static了,
static
top
, right
, bottom
, left
and z-index
properties do not apply我查了下W3school,发现也能得到同样的结论
right对static无效
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。总结:一般元素若是保持默认设置的static, 偏移属性和index属性对它们将不起作用。
- 偏移属性和index属性对static无效
- z-index和top、left偏移量属性
- position 属性和 z-index 属性对页面节点层级影响的例子
- 对css3属性 z-index的理解
- 解决ActiveX插件Z-Index属性无效问题
- ActiveX插件的Z-Index属性无效问题解决
- ActiveX插件的Z-Index属性无效问题解决
- static静态方法和属性
- static属性
- CSS中的position和z-index属性
- jquery 根据属性和 index来查找属性值
- 分析css中的position属性和z-index属性
- Java中final和static对修饰类、方法、属性的总结
- const、static、内部链接属性和外部链接属性整理
- const、static、内部链接属性和外部链接属性整理
- const、static、内部链接属性和外部链接属性整理
- const、static、内部链接属性和外部链接属性整理
- z-index属性简介
- Java:按值传递还是按引用传递详细解说
- 白菜之compareTo()和compareToIgnoreCase()
- 启动活动的最佳写法
- python操作mysql数据库
- NYOJ 108 士兵杀敌(一)
- 偏移属性和index属性对static无效
- 前端构建工具gulpjs的使用介绍及技巧
- java中使用正则表达式校验的一个例子
- java研发面试准备
- 数据库分区操作
- 用highcharts构造散点图
- MongoDB索引的种类与使用
- STL相关笔记
- 【POJ】[1064]Cable master