Menu
<div id="main" style="position: fixed">
<div id="inner" style="position: absolute">
</div>
</div>
Both main and inner containers taking position: fixed. How to make inner container with position:absolute and main container with position:fixed ?
277
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
If you are placing an element with absolute position, you need the base element to have a position value other than the default value. In your case if you change the position value of the parent div to 'relative' you can fix the issue.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper's page box.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
You need to define top, right, bottom or left properties when using fixed, relative or absolute positioning on an element.
#main {
background: #000;
position: fixed;
height: 300px;
width: 200px;
left: 20px;
top: 10px;
}
#inner {
background: #f00;
position: absolute;
height: 100px;
width: 100px;
left: 10px;
top: 10px;
}<div id="main">
<div id="inner">
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
