是否可以将伪元素的堆叠顺序设置在其父元素之下？我试图用:after伪元素CSS选择器#element {
position: relative;
z-index: 1;}#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;}好像::after元素不能低于元素本身。有办法让伪元素比元素本身低吗？
3 回答
饮歌长啸
TA贡献1951条经验 获得超3个赞
#element {
position: relative; /* optional */
width: 100px;
height: 100px;
background-color: blue;}#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;
/* create a new stacking context */
position: absolute;
z-index: -1; /* to be below the parent element */}<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Position a pseudo-element below its parent</title></head><body> <div id="element"> </div></body></html>
守着星空守着你
TA贡献1799条经验 获得超8个赞
#parent {
position: relative;
z-index: 1;}#pseudo-parent {
position: absolute;
/* no z-index allowed */}#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;}#parent { position: relative; z-index: 1; }#pseudo-parent { position: absolute; } /* no z-index required */#pseudo-parent:after
{ position: absolute; z-index: -1; }/* Example styling to illustrate */#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }<div id="parent"> <div id="pseudo-parent"> </div></div>
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
el {
transform-style: preserve-3d;}el:after {
transform: translateZ(-1px);}- 3 回答
- 0 关注
- 977 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消