div层的叠加法则（转载）

最新推荐文章于 2023-11-27 16:16:01 发布
转载 最新推荐文章于 2023-11-27 16:16:01 发布 · 678 阅读 · 0
文章标签：

#css

本文详细阐述了CSS层叠上下文中的五条重要法则，包括同辈元素与非同辈元素在不同定位方式及z-index设置下的显示层级规则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先明确几点在文中所需要用到的概念：

  1. 静态定位：position:static（为position属性的默认值）。
  2. 动态定位：position:relative或position:absolute或position:fixed。
  3. 祖元素：任意包含该元素的元素。
  4. 父元素：直接包含该元素的祖元素。
  5. 同辈元素：拥有共同的父元素的元素。

注：这些概念为作者自定义，仅用于本文。

引用:

关于同辈元素是个非常关键的词，这里还需要详细解释一下。

<div>
    <div></div>
    <div id="a"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="f">
    <div></div>
    <div id="b"></div>
    <div id="c"></div>
    <div></div>
    <div></div>
    <div></div>
</div>

在这个例子中，div#a与div#b并不是“同辈元素”，只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫“同辈元素”。

引用结束

接下来看看这五条法则：

法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="Chomo" />
  6. <link rel="start" href="http://www.14px.com" title="Home" />
  7. <title>法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。</title>
  8. </head>
  9. <style type="text/css">
  10. div { font:12px/1.5 arial;}
  11. div strong { color:#fff; background:#036; display:inline-block;}
  12. h3 strong { color:#f00;}
  13. /*--- 定义方块外形 ---*/
  14. .div1,
  15. .div2 {
  16. height:70px;
  17. width:150px;
  18. background:#cff;
  19. border:1px solid #036;
  20. }
  21. .grandDiv1,
  22. .grandDiv2 {
  23. padding:10px;
  24. border:1px solid #060;
  25. width:174px;
  26. background:#cf9;
  27. }
  28. .parentDiv1,
  29. .parentDiv2 {
  30. padding:10px;
  31. border:1px solid #f06;
  32. width:152px;
  33. background:#fcf;
  34. }
  35. /*--- 定义方块偏移位置、文字位置 ---*/
  36. .grandDiv2 {
  37. margin-top:-50px;
  38. margin-left:95px;
  39. }
  40. .parentDiv2 {
  41. margin-top:-40px;
  42. margin-left:85px;
  43. }
  44. .div2 {
  45. margin-top:-20px;
  46. margin-left:75px;
  47. padding-top:30px;
  48. height:40px;
  49. }
  50. .grandDiv2 .parentDiv2,
  51. .grandDiv2 .div2,
  52. .parentDiv2 .div2 { margin:0;}
  53. </style>
  54. <body>
  55. <h3>法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。</h3>
  56. <div class="div1">.div1{position:static}</div>
  57. <div class="div2">.div2{position.static}</div>
  58. <div class="div1" style="position:relative;">.div1{position.relative}</div>
  59. <div class="div2" style="position:absolute;">.div2{position.absolute}</div>
  60. </body>
  61. </html>


法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="Chomo" />
  6. <link rel="start" href="http://www.14px.com" title="Home" />
  7. <title>法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。</title>
  8. </head>
  9. <style type="text/css">
  10. div { font:12px/1.5 arial;}
  11. div strong { color:#fff; background:#036; display:inline-block;}
  12. h3 strong { color:#f00;}
  13. /*--- 定义方块外形 ---*/
  14. .div1,
  15. .div2 {
  16. height:70px;
  17. width:150px;
  18. background:#cff;
  19. border:1px solid #036;
  20. }
  21. .grandDiv1,
  22. .grandDiv2 {
  23. padding:10px;
  24. border:1px solid #060;
  25. width:174px;
  26. background:#cf9;
  27. }
  28. .parentDiv1,
  29. .parentDiv2 {
  30. padding:10px;
  31. border:1px solid #f06;
  32. width:152px;
  33. background:#fcf;
  34. }
  35. /*--- 定义方块偏移位置、文字位置 ---*/
  36. .grandDiv2 {
  37. margin-top:-50px;
  38. margin-left:95px;
  39. }
  40. .parentDiv2 {
  41. margin-top:-40px;
  42. margin-left:85px;
  43. }
  44. .div2 {
  45. margin-top:-20px;
  46. margin-left:75px;
  47. padding-top:30px;
  48. height:40px;
  49. }
  50. .grandDiv2 .parentDiv2,
  51. .grandDiv2 .div2,
  52. .parentDiv2 .div2 { margin:0;}
  53. </style>
  54. <body>
  55. <h3>法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。</h3>
  56. <div class="div1" style="position:relative; z-index:2;">.div1{position.relative;z-index:2}</div>
  57. <div class="div2" style="position:relative; z-index:1;">.div2{position.relative;z-index:1}</div>
  58. </body>
  59. </html>


法则三：同辈元素定位方式不同时，动态定位居上。

 


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="Chomo" />
  6. <link rel="start" href="http://www.14px.com" title="Home" />
  7. <title>法则三：同辈元素定位方式不同时，动态定位居上。</title>
  8. </head>
  9. <style type="text/css">
  10. div { font:12px/1.5 arial;}
  11. div strong { color:#fff; background:#036; display:inline-block;}
  12. h3 strong { color:#f00;}
  13. /*--- 定义方块外形 ---*/
  14. .div1,
  15. .div2 {
  16. height:70px;
  17. width:150px;
  18. background:#cff;
  19. border:1px solid #036;
  20. }
  21. .grandDiv1,
  22. .grandDiv2 {
  23. padding:10px;
  24. border:1px solid #060;
  25. width:174px;
  26. background:#cf9;
  27. }
  28. .parentDiv1,
  29. .parentDiv2 {
  30. padding:10px;
  31. border:1px solid #f06;
  32. width:152px;
  33. background:#fcf;
  34. }
  35. /*--- 定义方块偏移位置、文字位置 ---*/
  36. .grandDiv2 {
  37. margin-top:-50px;
  38. margin-left:95px;
  39. }
  40. .parentDiv2 {
  41. margin-top:-40px;
  42. margin-left:85px;
  43. }
  44. .div2 {
  45. margin-top:-20px;
  46. margin-left:75px;
  47. padding-top:30px;
  48. height:40px;
  49. }
  50. .grandDiv2 .parentDiv2,
  51. .grandDiv2 .div2,
  52. .parentDiv2 .div2 { margin:0;}
  53. </style>
  54. <body>
  55. <h3>法则三：同辈元素定位方式不同时，动态定位居上。</h3>
  56. <div class="div1" style="position:relative;">.div1{position.relative}</div>
  57. <div class="div2">.div2{position.static}</div>
  58. <div class="div1">.div1{position.static}</div>
  59. <div class="div2" style="position:absolute;">.div2{position:absolute}</div>
  60. </body>
  61. </html>


法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="Chomo" />
  6. <link rel="start" href="http://www.14px.com" title="Home" />
  7. <title>法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。</title>
  8. </head>
  9. <style type="text/css">
  10. div { font:12px/1.5 arial;}
  11. div strong { color:#fff; background:#036; display:inline-block;}
  12. h3 strong { color:#f00;}
  13. /*--- 定义方块外形 ---*/
  14. .div1,
  15. .div2 {
  16. height:70px;
  17. width:150px;
  18. background:#cff;
  19. border:1px solid #036;
  20. }
  21. .grandDiv1,
  22. .grandDiv2 {
  23. padding:10px;
  24. border:1px solid #060;
  25. width:174px;
  26. background:#cf9;
  27. }
  28. .parentDiv1,
  29. .parentDiv2 {
  30. padding:10px;
  31. border:1px solid #f06;
  32. width:152px;
  33. background:#fcf;
  34. }
  35. /*--- 定义方块偏移位置、文字位置 ---*/
  36. .grandDiv2 {
  37. margin-top:-50px;
  38. margin-left:95px;
  39. }
  40. .parentDiv2 {
  41. margin-top:-40px;
  42. margin-left:85px;
  43. }
  44. .div2 {
  45. margin-top:-20px;
  46. margin-left:75px;
  47. padding-top:30px;
  48. height:40px;
  49. }
  50. .grandDiv2 .parentDiv2,
  51. .grandDiv2 .div2,
  52. .parentDiv2 .div2 { margin:0;}
  53. </style>
  54. <body>
  55. <h3>法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。</h3>
  56. <div class="parentDiv1">
  57. .parentDiv1{position:staitc}
  58. <div class="div1">.div1{position:staitc}</div>
  59. </div>
  60. <div class="parentDiv2">
  61. <div class="div2">.div2{position:staitc}</div>
  62. .parentDiv2{position:staitc}
  63. </div>
  64. <div class="grandDiv1">
  65. .grandDiv1{position:staitc}
  66. <div class="parentDiv1">
  67. .parentDiv1{position:staitc}
  68. <div class="div1">.div1{position:staitc}</div>
  69. </div>
  70. </div>
  71. <div class="grandDiv2">
  72. <div class="parentDiv2">
  73. <div class="div2">.div2{position:staitc}</div>
  74. .parentDiv2{position:staitc;}
  75. </div>
  76. .grandDiv2{position:static;}
  77. </div>
  78. </body>
  79. </html>


法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

情况1：子元素的z-index无论多大，父元素大者居上。

情况2：父元素居下，子元素也可以居上。

情况1、情况2结合扩展比较。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="Chomo" />
  6. <link rel="start" href="http://www.14px.com" title="Home" />
  7. <title>法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</title>
  8. </head>
  9. <style type="text/css">
  10. div { font:12px/1.5 arial;}
  11. div strong { color:#fff; background:#036; display:inline-block;}
  12. h3 strong { color:#f00;}
  13. /*--- 定义方块外形 ---*/
  14. .div1,
  15. .div2 {
  16. height:70px;
  17. width:150px;
  18. background:#cff;
  19. border:1px solid #036;
  20. }
  21. .grandDiv1,
  22. .grandDiv2 {
  23. padding:10px;
  24. border:1px solid #060;
  25. width:174px;
  26. background:#cf9;
  27. }
  28. .parentDiv1,
  29. .parentDiv2 {
  30. padding:10px;
  31. border:1px solid #f06;
  32. width:152px;
  33. background:#fcf;
  34. }
  35. /*--- 定义方块偏移位置、文字位置 ---*/
  36. .grandDiv2 {
  37. margin-top:-50px;
  38. margin-left:95px;
  39. }
  40. .parentDiv2 {
  41. margin-top:-40px;
  42. margin-left:85px;
  43. }
  44. .div2 {
  45. margin-top:-20px;
  46. margin-left:75px;
  47. padding-top:30px;
  48. height:40px;
  49. }
  50. .grandDiv2 .parentDiv2,
  51. .grandDiv2 .div2,
  52. .parentDiv2 .div2 { margin:0;}
  53. </style>
  54. <body>
  55. <h3>法则五<strong>（重要）</strong>：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</h3>
  56. <p>情况1：子元素的z-index无论多大，父元素大者居上。<p>
  57. <div class="parentDiv1" style="position:relative; z-index:2;">
  58. .parentDiv1{position:relative;<strong>z-index:2</strong>}
  59. <div class="div1">.div1{position:static}</div>
  60. </div>
  61. <div class="parentDiv2" style="position:relative; z-index:1;">
  62. <div class="div2" style="position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div>
  63. .parentDiv2{position:relative;<strong>z-index:1</strong>}
  64. </div>
  65. <p>情况2：父元素居下，子元素也可以居上。<p>
  66. <div class="parentDiv1">
  67. .parentDiv1{position:staitc}
  68. <div class="div1" style="position:relative;">.div1{position:relative}</div>
  69. </div>
  70. <div class="parentDiv2">
  71. <div class="div2">.div2{position:staitc}</div>
  72. .parentDiv2{position:staitc}
  73. </div>
  74. <p>情况1、情况2结合扩展比较。<p>
  75. <div class="grandDiv1" style="position:relative; z-index:3;">
  76. .grandDiv1{position:relative;<strong>z-index:3</strong>}
  77. <div class="parentDiv1">
  78. .parentDiv1{position:staitc}
  79. <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div>
  80. </div>
  81. </div>
  82. <div class="grandDiv2">
  83. <div class="parentDiv2" style="position:relative; z-index:4;">
  84. <div class="div2">.div2{position:staitc}</div>
  85. .parentDiv2{position:relative;<strong>z-index:4</strong>}
  86. </div>
  87. .grandDiv2{position:static;}
  88. </div>
  89. </body>
  90. </html>


引用:

其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：

<div id="ab" style="position:absolute;">
    <div id="a" style="position:relative; z-index:100;">
        <div id="a_inner1">
            <div id="a_inner2">
                <div id="a_inner3" style="position:relative; z-index:98;">
                    <div id="a_inner4">
                        <div id="a_inner5">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="b">
        <div id="b_inner1">
            <div id="b_inner2">
                <div id="b_inner3" style="position:relative; z-index:99;">
                    <div id="b_inner4">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关系。
到它们所共同拥有的祖元素div#ab的下一级为止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
然后分析它们的祖元素中具有动态定位的：div#a_inner5的祖元素中含有动态定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有动态定位的元素有：div#b_inner3。
然后再拿出最高级进行比较：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已经与position:static无关，而其祖元素却可以通过html的位置来进行比较。

引用结束

当然，有时候还存在特例，比如flash、比如ie6中的select无法遮住，这些都属于异常情况，大家可以自己搜索一下相关文章。

狗蛋*
关注
div层的叠加效果
∧︵∧全世界的屋顶 ∧︵∧
05-22 1279
貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。 首先明确几点在文中所需要用到的概念： 静态定位：position:static（为position属性的默认值）。 动态定位：positio
关于CSS3中多个DIV 盒子垂直叠加及空间堆放z-index计算问题
哈里·雪利博客
03-06 3854
关于CSS3中多个DIV盒子叠加计算问题                                                                     DIV盒子叠加计算                                       div.outer{width:350px;height:350px;padding:0px;
DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
12-13
让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位（可重叠） 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别 接下来我们为大家奉上DIV按自己意愿重叠、叠加实例布局。我们新建4个DIV盒子，一个大的DIV盒子，CSS命名为“.div-rela
div叠加
AAyutainAA的专栏
09-10 614
div 叠加 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位（可重叠） 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了观察效果，我们对不同DIV设置不同
div图片叠加
weixin_34309543的博客
06-22 195
2019独角兽企业重金招聘Python工程师标准>>> ...
Css Div浮动叠加层效果（网易邮箱登陆效果）.
10-24
Css Div浮动叠加层效果（网易邮箱登陆效果）. Css Div浮动叠加层效果（网易邮箱登陆效果）.
CSS 层叠加的5条原则
09-25
CSS 层叠加的 5 条原则 CSS 层叠加是网页布局中一个非常重要的概念，它决定了 HTML 元素在浏览器中的排列顺序。了解 CSS 层叠加的 5 条原则是非常必要的，以便更好地控制网页的布局。 法则一：同辈元素定位方式...
点击文字弹出一个DIV层窗口代码
07-15
点击文字弹出一个DIV层窗口代码,下载就能用
div+css实现div的多层重叠，并且居中显示
11-04
我们在制作网页时，有时需要多重div的重叠，每个div添加不同的内容，以实现特殊的层叠效果，这个如何实现，在网上没找到现成的详细的教程，但是可以用现有的知识，自己摸索哦。终于成功了，O(∩_∩)O~ 分享出来。可以在此基础上修改添加内容。源代码+自己写的教程，希望对初学div+css的朋友有启发。
层叠样式，将一个div覆盖到另一个div上
09-11
层叠样式，将一个div覆盖到另一个div上
DIV层的五条叠加法则
前台技术
07-18 3298
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ] [操作系统：Windows] 貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。
css div重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
Code-lover's Learning Notes
07-28 5768
重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位（可重叠） 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别 接
两个div重叠在一起
最新发布
weixin_40058289的博客
11-27 641
div 重叠
用div实现图层叠加
xftimes的专栏
07-23 1578
html语言如图：
原生JavaScript实现DIV层拖动叠加的教程
在IT领域中，"原生js制作简单的浮动div层拖动叠加效果"涉及到的技术点包括原生JavaScript、HTML与CSS。通过这些技术，我们可以创建出具有拖动叠加效果的div元素，这是一种常见的Web界面交互方式，能够增强用户的体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值