html设置堆叠顺序 |
您所在的位置：网站首页 › 多个div层叠设置顺序怎么设置 › html设置堆叠顺序 |
html设置堆叠顺序
|
堆叠的顺序 1.什么是堆叠顺序 以定位的元素们堆叠在一起的排列顺序。例如下图，就是框二元素堆叠在了框三上面。 2.语法 属性：z-index 取值：无单位的数字，数字越大元素越靠上，默认值为0 .div1{ background: #f00; position: absolute; *注意 outline: 5px solid #000; top: 100px; left: 200px; z-index: 10; } .div2 { background: #0f0; position: absolute; *注意 outline: 5px solid #000; top: 50px; left: 75px; z-index: 100; } ......... *注 ： 该div块靠后上3.注意 1.如果堆叠顺序相同的话，则后来者居上 2.只有定位的元素才能z-index 定位：relative（相对定位）/absolute（绝对定位）/fixed（固定定位） 注：我前面的文章有写到，不了解的同学们可以去看看。 3.父子元素之间，永远是子元素压在父元素之上，是最不受堆叠影响的。 引用： 在一个网页里面实际是分为七层，从背景开始慢慢叠上去， 1 背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。 2 负z-index值 —— 层叠上下文内有着负z-index值的子元素。 3 块级盒 —— 文档流中非行内非定位子元素。 4 浮动盒 —— 非定位浮动元素。 5 行内盒 —— 文档流中行内级别非定位子元素。 6 z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。 7 正z-index值 —— 定位元素。 层叠上下文中的最高等级。4.案例： div { width: 200px; height: 200px; padding: 20px; } *设置了所有的div块大小 .one, .two, .three, .four { position: absolute; } 给div块进行定位 .one { background: #f00; outline: 5px solid #000; top: 100px; left: 200px; z-index: 10; *注意 } .two { background: #0f0; outline: 5px solid #000; top: 50px; left: 75px; z-index: 100; *注意 } .three { background: #0ff; outline: 5px solid #000; top: 125px; left: 25px; z-index: 150; *注意 } .four { background: #00f; outline: 5px solid #ff0; top: 200px; left: 350px; z-index: 50; 注意 } z-index = 10 z-index = 100 z-index = 150 z-index = 50效果图： 简单点理解就是，把网页比作一个大世界，那每层就是一个小世界，每个小世界里也可以有很多世界，一个好看的网页就是靠无数个世界堆叠起来的。看例子，值为100的div块和值为150的div块是处于值为10的div块里面的，值为50的div块是大于值为10的div块的，所以值为50的div块在值为10的div块上面，而值为100和150的两个div块在值为10的div块的世界里面堆叠，永远处于div块值为50的元素下面。可能有点啰嗦，但希望大家能理解这个知识点。 |
看图明明值为150和100的div块大于值为50的div块，但值为50的div块确在最上层。 因为这两个代码是在值为10的div块里面的。看代码【本文地址】
今日新闻 |
推荐新闻 |