Question

我有以下示例，我不知道它是如何工作的：

* {
	padding:0px;
	margin:0px;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	
}
h2 {
	font-size:15px;
	font-weight:lighter;
	padding:0 0px 8px 0;
}
#container {
	width:980px;
	margin:auto;
	margin-top:100px;	
}

.example {
	width:270px;
	height:270px;
	float:left;		
	margin-right:60px;	
}
#example3 {
	margin-right:0px;	
}


#example3 .grandparent {
	width:250px;
	height:250px;
	background-color:#CCCCCC;
	position:relative;
}

#example3 .parent {
	width:150px;
	height:150px;
	background-color:#999999;
	position:absolute;
	bottom:0px;
}
#example3 .child {
	width:70px;
	height:70px;
	background-color:#666666;
	position:relative;
  bottom: 0px;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Demo - Child DIVs positioned relative to parent</title>
</head>

<body>
<div id="container">
    
    <div id="example3" class="example">
   	  <div class="grandparent">Grandparent
          <div class="parent">Parent
            <div class="child">Child</div>
          </div>
      </div>
    </div>
</div>
</body>
</html>

为什么房屋底部不起作用？但是当我设置例如top: 50%时，该属性将被接受。

当我嵌套具有不同position属性的div时会发生什么？

Answer 1

将position:relative的{{1}}更改为.child

Answer 2

底部属性在嵌套div中不起作用，因为您正在将底部属性与position:relative;一起使用。这将适用于position:absolute;。

#example3 .child {
    width:70px;
    height:70px;
    background-color:#666666;
    position:relative;
  bottom: 0px;
}

为什么bottom属性在嵌套div中不起作用？

2 个答案: