使用div创建css模板

Question

我正在尝试使用div标签为我的所有页面创建寺庙。 我想要我的模板 在我的布局中，“o”是外部容器，“L”是日志div，“s”是侧面菜单div，“c”是内容div。我创建了我的模板，但我的问题是我的内容'content div'重叠为发送镜头。

热衷于解决这个问题。

.rest {

  height: 685px;

  padding: 0px 7px;
}
.sidemenu {
  float: left;
  margin-top: 150px;
  width: 100%;
   }
.content {
  
 position:relative;
 
  }
.side{
  width: 24%;
  float: left;
  display: inline-block;
}
 form[name=profile] p {
padding-left: 20%;

}

  hr {
      margin: 0;
      width: 1px;
      height: 660px;
      border: 0;
      background: #fff;
      float: left;
    }

h1{
display:inline-block; 
text-align:center
margin-left:20px;
margin-right:-40px;
}
.outer {
  margin-left: 20%;
  margin-top: 3%;
  margin-bottom: 3%;
  height: 737px;
  width: 60%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  
}
button.logout{
display:inline;
float:right;
margin-right:10px;


}
.lout{
float: right;
display: inline-block;
margin-top: 10px;
   }
.log {
 width:60%;
  height: 10%;
  position: absolute;
  border: 1px solid #f9f2f2;
  border-radius: 10px;

  display:inline-block; 
}
.sidemenu {
  float: left;
  margin-top: 150px;
  width: 100%;
   }
.content {
  
 position:relative;
 
  }

<div class="outer">
                <div class="log">
                <h1>Profile</h1>
                       <form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>
                       
                </div> <!--End of log div -->
                <div class="rest">
                  <div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="admin_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 -->
                        <div class="2 menu">
                          <a href="clients.php" class="astext">Clients</a>
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a href="employees.php" class="astext">Employees</a>
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        <a href="admin_file_view.php" class="astext">Documents</a>
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->
                   <hr>
                    <!--  <div class="heading" >
                         <h1>Profile</h1>
                      </div>    End of heading div -->
                   <div class="content">
                       <?php
		     include "config.php";
		     if($ses!='')
		     {
		      $sql="select * from register where id=$ses";
		      $sql1=mysql_query($sql);
		      $fet=mysql_fetch_assoc($sql1);
		      $name=$fet['name'];
		      $email=$fet['email'];
		      $phone=$fet['phone'];
		      $cname=$fet['company_name'];
		      $street=$fet['street'];
		      $add=$fet['address'];
		      $city=$fet['city'];
		      $state=$fet['state'];
		      $ein=$fet['ein'];
		      $id=$fet['id'];
		     }
		    ?>
		    
		    <form name="profile" method="post" >
			
			
			 <p>Name<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $name; ?>"</p>
			 <p>Email<input type="text" size=20 name="mail" maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $email; ?>"</p>
			 <p>Phone<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $phone; ?>"></p>
			 <p>Company name<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $cname;?>"></p>
		         <p>Street<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $street;?>"></p>
			 <p>Address<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $add; ?>"></p>
			 <p>City<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $city;?>"></p>
			 <p>State<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $state; ?>"></p>
			 <p>EIN<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $ein;?>"></p>
			<a class="change">Change Password</a><br>
		  <div class="pass">
		     <br><input type="password" class="textbox" placeholder="Current Password" name="old" id="old" size="20"/><br><br>
                        <input type="password"  class="textbox" placeholder="New Password" name="new" id="new" size="20"><br>
                       <br><br><br><br><button class="add" name="go" id="go">Go</button><a style="padding-right:2ex;"></a><a class="change"><button class="add" name="cancel" id="cancel">Cancel</button></a>
		  </div> 
			 <br>
			 <div class="tri"><button name="edit" class=add>&nbsp&nbspEdit&nbsp</button><button name="add"  class="upload" onclick="admin()">Add New</button></div></form>
			  
			 
			
                   </div> <!--End of content -->
                </div> <!--End of rest div -->
          </div> <!--End of outer div-->

Answer 1

class =“log”的div有“position：absolute;” - 从正常流量中移除绝对定位的元素。文档和其他元素的行为类似于绝对定位的元素不存在。 绝对定位的元素可以与其他元素重叠。 如果你希望“L”是绝对定位的，你可以用div =“rest”给div填充顶部，它等于class =“log”div的高度。