2015-11-26 2 views
0

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

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

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 IE:

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

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

+1

позиционирован относительно или статическими позиционируется нг ракурса? Это важно, чтобы ответить на этот вопрос. –

ответ

1

Оберните 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; 
} 
Смежные вопросы