Question

我有以下HTML页面：

<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="Layer1" style="position:absolute;text-align:left;left:0px;right:0px;width:99.7938%;height:92px;z-index:0;">
</div>
<div id="Layer2" style="position:absolute;text-align:left;left:0px;top:291px;width:99.7938%;height:3.7%;z-index:1;">
</div>
</body>
</html>

和以下CSS：

body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#Layer1
{
   background-color: #003C00;
   background-image: none;
   border: 1px #CCCCCC solid;
}
#Layer2
{
   background-color: #003C00;
   background-image: none;
   border: 1px #CCCCCC solid;
}

我的页面现在看起来如下图所示，我想添加一个新的内容，这个新div的内容出现在显示箭头的两个图层（layer1＆amp; layer2）之间，并且它假设没有扩展覆盖layer2。我试图介入其中，但内容显示在页面的最顶部。

Answer 1

摆脱position: absolute并避免任何内联样式。你已经有了一个CSS文件，所以在那里添加所有规则以便更清晰。

＆＃13;

body {
  background-color: #FFF;
  color: #000;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.1875;
  margin: 0;
  padding: 0;
}

#Layer1,
#Layer2 {
  background-color: #003C00;
  border: 1px #CCCCCC solid;
  color: #FFF;
}

#Layer1 {
  height: 92px;
}

#Layer2 {
  height: 30px;
}

#content { padding:0 1em;}

＆＃13;

<div id="Layer1" style="">header - layer 1</div>

<div id="content">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem vel, esse placeat possimus ipsam culpa dolor nihil dignissimos velit perferendis deserunt blanditiis necessitatibus rem maxime suscipit, magnam. Nobis, explicabo quas?</p>
  <p>Exercitationem ex, dolor, aperiam necessitatibus perferendis dignissimos quod. Incidunt facilis dolorum magni, tenetur repellat minima illum distinctio quas eos, veritatis esse facere minus obcaecati. Molestiae soluta fuga, obcaecati recusandae totam!</p>
  <p>Deserunt sapiente, neque nesciunt recusandae ratione dolore velit quam! Architecto itaque nihil suscipit reprehenderit aut veniam quia iste, mollitia, minima maiores ad tenetur quo dolor culpa est velit dignissimos alias.</p>
</div>

<div id="Layer2" style="">footer - layer 2</div>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/du8q38tj/

Divs占据父母宽度的100％所以不需要设置它们的宽度（为什么你要制作99.xxx？）
仅在您要创建重叠的内容/图层时使用position: absolute
百分比高度仅在父级具有已定义高度时才有效。要使其适用于身体直接后代的元素，您必须添加html, body { height: 100%; }

Answer 2

您可以在css中使用float：left或float：right来尝试浮动项目中的元素。您还应该从css中删除绝对位置元素。

控制<div>内容的位置

2 个答案: