我当前的代码

Question

我正在尝试着陆图像，然后在下面有部分。无论屏幕分辨率如何，为了获得整页，我必须绝对地保持位置。相对不起作用，因为这是一个注入ng-view的html文档。

我当前的代码

的index.html

<html>
...
<body ng-app="testApp">
<div ng-view></div>
...
</body>
</html>

main.html中

<div class="main-header-content">

</div>
<!-- this needs to go below div above but above div is position absolute-->
<div class="main-info">
  <h1>heelo</h1>
</div>

的main.css

.main-header-content{
  position:absolute;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
  z-index:-1;
  background-color:#D8C8B8;
}

这似乎微不足道，因为许多网站正在使用常规css I.E：

http://ironsummitmedia.github.io/startbootstrap-creative/ http://ironsummitmedia.github.io/startbootstrap-agency/

我认为最棘手的部分是这个main.html，其效果应该是一个注入ng-view的页面。

Answer 1

将main.html内容包含在absolutely定位的div中，relatively定位子元素。 Absolute定位.main-header-content会要求您为兄弟姐妹设置固定top以使其正确对齐，这会使CSS变得复杂。

main.html中

<div class="wrapper" >
    <div class="main-header-content">

    </div>
    <!-- this needs to go below div above but above div is position absolute-->
    <div class="main-info">
       <h1>heelo</h1>
    </div>
</div>

的main.css

.wrapper{
  position:absolute;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}

.main-header-content{
  position:relative;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
  z-index:-1;
  background-color:#D8C8B8;
}

在绝对div下面的ng-view中定位div

我当前的代码

1 个答案: