CODEWITHSUNDEEP
htmlcssangularjs
Eddie Martinez
Eddie Martinez

Reputation: 13910

position div inside ng-view below absolute div

I am trying to have a landing image and then have sections below that. In order to get the full page regardless of screen resolution I had to make position absolute. Relative was not working since this is an html document being injected into the ng-view.

My current code

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;
}

It seems trivial since so many sites are doing it with regular css I.E:

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

What I believe is the tricky part is this main.html where the effect should be is a page that gets injected into ng-view.

Upvotes: 0

Views: 112

Answers (1)

Aravind Bharathy
Aravind Bharathy

Reputation: 1610

Wrap the main.html contents in a div that is absolutely positioned and relatively position the child elements. Absolute positioning .main-header-content will require you to set fixed top for the siblings for proper alignment which will complicate the 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;
}

Upvotes: 1

Related Questions