Marco Marco - 1 month ago 9
CSS Question

Position element inside position absolute

I have 3 elements,

#app
,
#main-section
that is inside
#app
, and
#magazine-detail
that is inside
#main-section
.
How can I position
#magazine-detail
inside of
#magazine-section
when the
#app
is set to position: relative; and
#magazine-detail
is set to position: absolute;?

This is the css:

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

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


Entire html is too big so I am posting just a short version, hope you will get the picture:

<div id="app">

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

</div>


I need to position
#magazine-detail 30px
from the bottom of the
main section
.
I have tried to position it with position: absolute like it is suggested to do,like this:

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


But then the element was position somehow 30px from the top and not bottom?

Answer

I guess following is yout html

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

Your #app is relative and main-section is absolute with respect to app. The thing is that in css if you set magazine-detail absolute too, it will be positioned with respect to main-section.

Below is a working sample:

#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>

Comments