позиция div внутри ng-view ниже абсолютного div

Question

позиция div внутри ng-view ниже абсолютного div

0

Я пытаюсь получить изображение посадки, а затем разделы ниже. Чтобы получить полную страницу, независимо от разрешения экрана, мне пришлось сделать положение абсолютным. Относительный не работал, так как это html-документ, который вводится в ng-view.

Мой текущий код

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

Это кажется тривиальным, так как многие сайты делают это с помощью обычного IE css:

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

Я считаю, что сложная часть этого main.html, где должен быть эффект, - это страница, которая вводится в ng-view.

Eduardo Dennis 26 нояб. 2015, в 07:07

Источник

1

Является ли ng-view относительно позиционированным или статичным? Это важно, чтобы ответить на этот вопрос.
Aravind Bharathy 26 нояб. 2015, в 06:22

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Является ли ng-view относительно позиционированным или статичным? Это важно, чтобы ответить на этот вопрос.

Aravind Bharathy · Accepted Answer · 2015-11-26T05-05-00.000Z

Оберните содержимое main.html в div, который absolutely позиционируется и 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;
}