html - CSS:z-index:-1 和背景:透明不起作用

Question

看我的照片:

我的 CSS 笔记:

我被困在这里了。它应该是那里的一条垂直线(从底部继续)，但它不见了，为什么？我对他们的 parent 使用了 z-index:-1; 对他们的 child 使用了 z-index: 1 这样 child 就可以在上面提高，但事实并非如此工作。我曾对他们的 parent 使用过 background: transparent ，但也没有用。这让我很困惑。我被困在这里将近 3 个小时，请帮助我。

这是我的 jsfiddle:click this

这是我的 CSS:

#boxpost{
    height: auto;
    border-bottom: 1px dotted #FEBA0E; /*orange*/
}
#commentleftside{
    margin-left:10px;
}
#bigbox{
    width: auto;
    display: table;
}
.colkiri{
    display: table-cell;
    border-left: 1px dotted #FEBA0E; /*orange*/
    z-index: 1;
}
.colkirichild{
    width: 20px;
}
.colkanan{
    display: table-cell;
    z-index: 1;
}
.colkanankedip{
    display: table-cell;
    background-color: yellow;
}
.colkananchild{
    border-left: 1px dotted #FEBA0E; /*orange*/
    float: left;
}
#username{
    white-space:nowrap;
    padding-top: 5px;
}
#username:before{
    content:"\00a0\00a0\00a0\00a0\00a";
    text-decoration:line-through;
    color: #FEBA0E;
}
.usernamechild{
    color: #369; /*biru gelap*/
    font-size: 70%;
    font-weight: bold;
    font-family: verdana; /*nempel tulisannya*/
}
.usernamechild a {
    color: #369; /*biru gelap*/
    text-decoration: none;
}
.usernamechild a:hover {
    color: #369; /*biru gelap*/
    text-decoration: underline;
    mouse: pointer;
}
#comment{
    font-family: normal x-small verdana,arial,helvetica,sans-serif;
    font-weight: 400;
    padding-bottom: 5px;
    background: transparent;
    z-index: -1;
}
#comment:before{
    text-decoration: none;
    float:left;
}
.commentchild{
    display: table;
    padding-left: 38px;
    background: transparent;
}
.countdown{
    color: #888;
    font-size: x-small;
    font: normal x-small verdana,arial,helvetica,sans-serif;
}
#reportthis {
    color: #7d7d7c; /*abu-abu gelap*/
    font-size: 70%;
    font-weight: bold;
    font-family: sans-serif; /*nempel tulisannya*/
    word-spacing: 1px;
    cursor: pointer;
    padding-left: 38px;
    background: transparent;
    z-index: -1;
}
#reportthis a {
    color: #7d7d7c;/*abu-abu gelap*/
    text-decoration: none;
}
#reportthis a:hover {
    color: #7d7d7c;/*abu-abu gelap*/
    text-decoration: underline;
}

这是我的 PHP:

        while($f=mysql_fetch_object($q)){
            include("cdglobal.php");
            echo "
                <div id='bigbox'>
            ";
            for($a=1;$a<=$f->hor;$a++){
                echo "
                    <div class='colkiri'>
                        <div class='colkirichild'></div>
                    </div>
                ";
            }
            echo "".($f->ver==$ver?"<div class='colkanankedip'>":"<div class='colkanan'>")."
                        <div class='colkananchild'>
                            <div id='username'>
                                <span class='usernamechild'><a href='/indexprofile.php?hal=1&un=$f->username'><img src='".($f->foto=="none"?"/img/nophoto.jpg":"$f->foto")."' width='15' height='15' class='bayangan'></img> $f->username</a></span> <span class='countdown'>$countdown</span>
                            </div>
                            <div id='comment'>
                                <div class='commentchild'>$f->comment</div> 
                                <div id='reportthis'>
                                    <span id='idreply$f->ver$f->username' onclick='clickreply(this)'>reply</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ";
        }

Answer 1

试试这个:

		var c=2;
		var z;
		function mj1(){
			mj2();
		}
		function mj2(){
			username='michel jackson';
			for(a=1;a<=c;a++){
				z=z+"<div id='bigbox'>";
				for(b=1;b<=a;b++){
					z=z+"<div class='colkiri'>"+
							"<div class='colkirichild'></div>"+
						"</div>";
				}
					z=z+"<div class='colkanan'>"+
							"<div class='colkananchild'>"+
								"<div id='username'>"+
									"<span class='usernamechild'><img src='http://images2.fanpop.com/images/photos/7600000/Bad-michael-jackson-7647469-1787-2560.jpg' width='15' height='15' class='bayangan'></img> username</span> <span class='countdown'>5 minutes ago</span>"+
								"</div>"+
								"<div id='comment'>"+
									"<div class='commentchild'>Michael Joseph Jackson was born on August 29, 1958. He was the eighth of ten children in an African-American working-class family who lived in a two-bedroom house on Jackson Street in Gary, Indiana, an industrial city and a part of the Chicago metropolitan area.[12][13] His mother, Katherine Esther Scruse, was a devout Jehovah's Witness."+
									"<div id='reportthis'>"+
										"<span id='idreply' onclick='clickreply(this)'>reply</span>"+
									"</div></div>"+
								"</div>"+
							"</div>"+
						"</div>"+
					"</div>";
			}
			document.getElementById("showup").innerHTML="<p> "+z+" </p>";
		}

	#boxpost{
		height: auto;
		border-bottom: 1px dotted #FEBA0E; /*orange*/
	}
	#commentleftside{
		margin-left:10px;
	}
	#bigbox{
		width: auto;
		display: table;
	}
	.colkiri{
		display: table-cell;
		border-left: 1px dotted #FEBA0E; /*orange*/
		z-index: 1;
	}
	.colkirichild{
		width: 20px;
	}
	.colkanan{
		display: table-cell;
		z-index: 1;
	}
	.colkanankedip{
		display: table-cell;
		background-color: yellow;
	}
	.colkananchild{
		border-left: 1px dotted #FEBA0E; /*orange*/
		float: left;
	}
	#username{
		white-space:nowrap;
		padding-top: 5px;
	}
	#username:before{
		content:"\00a0\00a0\00a0\00a0\00a";
		text-decoration:line-through;
		color: #FEBA0E;
	}
	.usernamechild{
		color: #369; /*biru gelap*/
		font-size: 70%;
		font-weight: bold;
		font-family: verdana; /*nempel tulisannya*/
	}
	.usernamechild a {
		color: #369; /*biru gelap*/
		text-decoration: none;
	}
	.usernamechild a:hover{
		color: #369; /*biru gelap*/
		text-decoration: underline;
		mouse: pointer;
	}
	#comment{
		font-family: normal x-small verdana,arial,helvetica,sans-serif;
		font-weight: 400;
		background: transparent;
		z-index: -1;
	}
	#comment:before{
		text-decoration: none;
		float:left;
	}
	.commentchild{
        display: table;
        margin-left: 20px;
        background: transparent;
        border-left: 1px dotted #FEBA0E;
        padding-left: 10px;
	}
	.countdown{
		color: #888;
		font-size: x-small;
		font: normal x-small verdana,arial,helvetica,sans-serif;
	}
	#reportthis {
		color: #7d7d7c; /*abu-abu gelap*/
		font-size: 70%;
		font-weight: bold;
		font-family: sans-serif; /*nempel tulisannya*/
		word-spacing: 1px;
		cursor: pointer;
		background: transparent;
		z-index: -1;
	}
	#reportthis a {
		color: #7d7d7c;/*abu-abu gelap*/
		text-decoration: none;
	}
	#reportthis a:hover {
		color: #7d7d7c;/*abu-abu gelap*/
		text-decoration: underline;
	}

	<div id='showup'></div>
	<input type='button' value='show' onclick='mj1()'></input>