网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于css中定位的简单介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一、相对定位
position: relative
相对默认的布局位置进行定位,也就是相对自己应该在的位置来定位。
.avatar {
top: 3px; //从上到下偏移3px
left: 7px; //从左到右偏移7px
position: relative;
}
属性设置元素的堆叠顺序,该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。也就是说拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
(3)、父子关系的z-index 如何设置,不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index,然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。
如下图,box1没有设置z-index,设置tooltip的z-index为负,box1就覆盖了tooltip
demo链接链接描述,目前不得其意,之后补坑