CSS布局,文字显示不出来?

来源：百度知道 编辑：UC知道 时间：2024/09/22 16:08:56
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#Layer1 {
left:198px;
top:50px;
width:294px;
height:141px;
z-index:1;
position: absolute;
background-color: #FF00FF;
}
#Layer2 {
width:100px;
height:100px;
z-index:2;
margin: -50px 0px 0px -50px;
background-color: #FFFF00;
}
</style>
</head>

<body>
<div id="Layer1">
<div id="Layer2">这是这里的文字显示不出来</div>
</div>
</body>
</html>

具体代码如上.
最主要的问题就是magin用负值的情况下，文字的显示。。

你把CSS作如下改动就行：
<style type="text/css">
#Layer1 {
left:198px;
top:50px;
width:294px;
height:141px;
z-index:1;
position: absolute;
background-color: #FF00FF;
}
#Layer2 {
width:100px;
height:100px;
z-index:2;
margin: -50px 0px 0px -50px;
background-color: #FFFF00;
}
</style>

改为：
<style type="text/css">
#Layer1 {
left:198px;
top:50px;
width:294px;
height:141px;

position: absolute;
background-color: #FF00FF;
}
#Layer2 {
width:100px;
height:100px;

margin: 0px;
background-color: #FFFF00;
}
</style>
这样就行，margin 是设置内补丁的．另外Z-index是设层的位置顺序．建议你多试验，多看效果．