DIV+CSS制作网页之如何设置z-index

最新推荐文章于 2022-09-07 09:50:47 发布

qq_23276567

最新推荐文章于 2022-09-07 09:50:47 发布

阅读量578

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_23276567/article/details/46224779

版权

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17);

font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">

<strong>首先明确几点在文中所需要用到的概念</strong>：</p>

<ol style="margin: 0px; padding: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">

  <li style="margin: 0px; padding: 0px; list-style: none;">静态定位：position:static（为position属性的默认值）。</li>

  <li style="margin: 0px; padding: 0px; list-style: none;">动态定位：position:relative或position:absolute或position:fixed。</li>

  <li style="margin: 0px; padding: 0px; list-style: none;">祖元素：任意包含该元素的元素。</li>

  <li style="margin: 0px; padding: 0px; list-style: none;">父元素：直接包含该元素的祖元素。</li>

  <li style="margin: 0px; padding: 0px; list-style: none;">同辈元素：拥有共同的父元素的元素。</li>

</ol>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">

<strong>注：这些概念为作者自定义，仅用于本文。</strong></p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><strong>引用:</strong></p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">关于同辈元素是个非常关键的词，这里还需要详细解释一下。</p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">

<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></p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">在这个例子中，div#a与div#b并不是“同辈元素”，只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫“同辈元素”。</p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">引用结束</p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><strong>接下来看看这五条法则</strong>：</p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。</p>

<p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; list-style: none; color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">
</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。</title>
</head>
<style type="text/css">
div { font:12px/1.5 arial;}
div strong { color:#fff; background:#036; display:inline-block;}
h3 strong { color:#f00;}
/*--- 定义方块外形 ---*/
.div1,
.div2 {
height:70px;
width:150px;
background:#cff;
border:1px solid #036;
}
.grandDiv1,
.grandDiv2 {
padding:10px;
border:1px solid #060;
width:174px;
background:#cf9;
}
.parentDiv1,
.parentDiv2 {
padding:10px;
border:1px solid #f06;
width:152px;
background:#fcf;
}
/*--- 定义方块偏移位置、文字位置 ---*/
.grandDiv2 {
margin-top:-50px;
margin-left:95px;
}
.parentDiv2 {
margin-top:-40px;
margin-left:85px;
}
.div2 {
margin-top:-20px;
margin-left:75px;
padding-top:30px;
height:40px;
}
.grandDiv2 .parentDiv2,
.grandDiv2 .div2,
.parentDiv2 .div2 { margin:0;}
</style>
<body>
<h3>法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。</h3>
<div class="div1">.div1{position:static}</div>
<div class="div2">.div2{position.static}</div>
<div class="div1" style="position:relative;">.div1{position.relative}</div>
<div class="div2" style="position:absolute;">.div2{position.absolute}</div>
</body>
</html>

<img src="https://img-blog.csdn.net/20150529085315185?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjMyNzY1Njc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。</span>

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><img src="https://img-blog.csdn.net/20150529085422015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjMyNzY1Njc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。</title>
</head>
<style type="text/css">
div { font:12px/1.5 arial;}
div strong { color:#fff; background:#036; display:inline-block;}
h3 strong { color:#f00;}
/*--- 定义方块外形 ---*/
.div1,
.div2 {
height:70px;
width:150px;
background:#cff;
border:1px solid #036;
}
.grandDiv1,
.grandDiv2 {
padding:10px;
border:1px solid #060;
width:174px;
background:#cf9;
}
.parentDiv1,
.parentDiv2 {
padding:10px;
border:1px solid #f06;
width:152px;
background:#fcf;
}
/*--- 定义方块偏移位置、文字位置 ---*/
.grandDiv2 {
margin-top:-50px;
margin-left:95px;
}
.parentDiv2 {
margin-top:-40px;
margin-left:85px;
}
.div2 {
margin-top:-20px;
margin-left:75px;
padding-top:30px;
height:40px;
}
.grandDiv2 .parentDiv2,
.grandDiv2 .div2,
.parentDiv2 .div2 { margin:0;}
</style>
<body>
<h3>法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。</h3>
<div class="div1" style="position:relative; z-index:2;">.div1{position.relative;z-index:2}</div>
<div class="div2" style="position:relative; z-index:1;">.div2{position.relative;z-index:1}</div>
</body>
</html>
</span>

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">法则三：同辈元素定位方式不同时，动态定位居上。</span>
</span>

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><img src="https://img-blog.csdn.net/20150529085426764?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjMyNzY1Njc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span></span>

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>法则三：同辈元素定位方式不同时，动态定位居上。</title>
</head>
<style type="text/css">
div { font:12px/1.5 arial;}
div strong { color:#fff; background:#036; display:inline-block;}
h3 strong { color:#f00;}
/*--- 定义方块外形 ---*/
.div1,
.div2 {
height:70px;
width:150px;
background:#cff;
border:1px solid #036;
}
.grandDiv1,
.grandDiv2 {
padding:10px;
border:1px solid #060;
width:174px;
background:#cf9;
}
.parentDiv1,
.parentDiv2 {
padding:10px;
border:1px solid #f06;
width:152px;
background:#fcf;
}
/*--- 定义方块偏移位置、文字位置 ---*/
.grandDiv2 {
margin-top:-50px;
margin-left:95px;
}
.parentDiv2 {
margin-top:-40px;
margin-left:85px;
}
.div2 {
margin-top:-20px;
margin-left:75px;
padding-top:30px;
height:40px;
}
.grandDiv2 .parentDiv2,
.grandDiv2 .div2,
.parentDiv2 .div2 { margin:0;}
</style>
<body>
<h3>法则三：同辈元素定位方式不同时，动态定位居上。</h3>
<div class="div1" style="position:relative;">.div1{position.relative}</div>
<div class="div2">.div2{position.static}</div>
<div class="div1">.div1{position.static}</div>
<div class="div2" style="position:absolute;">.div2{position:absolute}</div>
</body>
</html>
</span></span>

<span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;"><span style="color: rgb(17, 17, 17); font-family: 宋体, 微软雅黑, Verdana, Helvetica; font-size: 14px; line-height: 25px;">
</span></span>

qq_23276567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS制作网页之如何设置z-index

首先明确几点在文中所需要用到的概念：静态定位：position:static（为position属性的默认值）。动态定位：position:relative或position:absolute或position:fixed。祖元素：任意包含该元素的元素。父元素：直接包含该元素的祖元素。同辈元素：拥有共同的父元素的元素。注：这些概念为作者自定义，仅用于本文。引用:关于同辈元素是个非常关键的词，这里还
复制链接

扫一扫