Html z指数不'；我好像不工作_Html_Css

Html z指数不'；我好像不工作

html css

Html z指数不'；我好像不工作,html,css,Html,Css,我使用了下面的HTML5和CSS3代码来呈现一个星形和一些显示在内部的文本。我尝试将p标记的z索引设置为1，然后设置为10，但完整文本不会显示在星形上方。只显示段落内的部分文本。有人能给我解释一下原因吗 HTML5代码： <!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body> <d

我使用了下面的HTML5和CSS3代码来呈现一个星形和一些显示在内部的文本。我尝试将p标记的z索引设置为1，然后设置为10，但完整文本不会显示在星形上方。只显示段落内的部分文本。有人能给我解释一下原因吗

HTML5代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="star-five"><p>Hello Weaver!</p></div>
</body>
</html>

它可以工作，您只需编写

-5

而不是

。

有效，您只需编写

-5

而不是

。

。由于您的

没有

位置

，因此它没有在

z索引中分解
在p
上设置position:relative

或者，在：before
元素上使用否定的z-index
，如Benio的回答中所示-这是有效的，因为“容器”#星五
定义了堆叠上下文（通过拥有自己的z-index
）。否则，负的z索引将把它移到
后面
 z-索引
不适用于具有位置：静态
（即无位置
设置）的元素。由于您的p
没有位置
，因此它没有在z索引中分解
在p
上设置position:relative

或者，在：before
元素上使用否定的z-index
，如Benio的回答中所示-这是有效的，因为“容器”#星五
定义了堆叠上下文（通过拥有自己的z-index
）。否则，负的z索引将把它移到
后面
p { 
  font-size: 20px; 
  color: #000000;
  z-index: 10;
}

#star-five {
   z-index: 5;
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   z-index: 5;
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   z-index: 5;
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}