How to position an element with position: absolute inside another same element with position: absolute.

If you do not specify left, top, then the element is displayed just below the parent. I need to shift it a little. By specifying left and top you can position the element at the specified coordinates, but the connection with the parent is lost.

And do all this without javascript. With JS, there would be no question.

Now a little more. Maybe I am inventing a bicycle, but I needed to make a multi-level popup menu. Of course, I was looking for ready-made solutions, but there was nothing suitable.

Now it is implemented, literally, by 2-3 small classes. The problem is that the submenu is displayed below the parent element, overlapping the rest. It is impossible to change position to relative - then the submenu will occupy a place in the main menu. The coordinates can not be determined - they are non-permanent.

And I repeat once again - without using JavaScript.

Is it possible to do this?

  • maybe so jsfiddle.net/soledar10/qdrtk2vk - soledar10
  • The parent has no fixed location. Otherwise, one could also set the left, top submenu. In this and the snag. The parent menu appears hovering (: hover) on a specific item that can be set anywhere on the page. When you hover over the item from the submenu, you need to show it so that it does not overlap the rest. I can say that if you set the left, then everything is fine - the submenu is shown relative to the parent. But from the top this trick did not work. - Vitaly
  • Hmm, I don't seem to understand the example. This can be a good solution. Thanks, I will try to apply it. - Vitaly
  • Happened. As it was necessary. Thank. - Vitaly

1 answer 1

.parent-absolute{ position: absolute; top: 50px; left: 50px; width: 150px; height: 150px; background: #ccc; } .child-relative{ position: relative; } .child-absolute{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #00f; } 
 <div class="parent-absolute"> <div class="child-relative"> <div class="child-absolute"> child-absolute </div> </div> </div>