позиции элемента внутри позиции абсолютного

Question

У меня есть 3 элементов, #app, #main-section, что находится внутри #app и #magazine-detail, что находится внутри #main-section. Как установить положение #magazine-detail внутри #magazine-section, когда #app установлено в положение: относительное; и #magazine-detail установлено в положение: absolute ;?

Это CSS:

#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

#main-section { 
    position: absolute; 
    top: 77px; 
    left: 0; 
    width: 100%; 
} 

Весь HTML слишком большой, так что я отправляю только короткую версию, надеюсь, вы получите картину:

<div id="app"> 

    ... 
    <div id="main-section"> 
     ... 
     <div id="main-section"> 
     ... 
     </div> 
    </div> 

</div> 

Мне нужно позиционировать от нижней части main section. я пытался позиционировать его положение: абсолют, как это предлагается сделать, например:

#magazine-detail { 
    position: absolute; 
    bottom: 30px; 
} 

Но тогда элемент был каким-то образом положение 30px от верхней и нижней части не?

Answer 1

Я думаю следующее YOUT HTML

<div id="app"> 
    <div id="main-section"> 
     <div id="magazine-detail"></div> 
    </div> 
</div> 

Вашего #app относителен и main-section абсолютен по отношению к app. Дело в том, что в css, если вы также установили magazine-detail, он будет располагаться относительно main-section.

Ниже приведен рабочий пример:

#app { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 200px; 
 
    padding: 5px; 
 
    border: 2px solid red; 
 
} 
 
#main-section { 
 
    position: absolute; 
 
    height: 80%; 
 
    width: 80%; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    top: 15px; 
 
    left: 15px 
 

 
} 
 
#magazine-detail { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 1px dotted green;  
 
    bottom: 30px; 
 
}

<div id="app"> 
 
    <div id="main-section"> 
 
    <div id="magazine-detail"></div> 
 
    </div> 
 
</div>

Answer 2

Попробуйте это:

#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border:1px solid #eee; 
} 

#main-section { 
    position: absolute; 
    top: 77px; 
    left: 0; 
    width: 100%; 
    height:400px; 
    border:1px solid #ccc; 
} 

#magazine-detail { 
    position: absolute; 
    border:1px solid #ff0000; 
    width:400px; 
    bottom:30px; 
} 

HTML:

<div id="app"> 
    <div id="main-section"> 
     <div id="magazine-detail"> 
     This is the test<br> 
     This is the test<br> 
     This is the test<br> 
     This is the test<br> 
     This is the test 
     </div> 
    </div> 
</div> 

Положение абсолютное положение это элементы, как на позицию родительского контейнера, поэтому для того, чтобы сделать ваш # основного раздела и # магазинного подробноположение абсолютного, то #app должен быть расположен относительно .