Html Question posted in
Some basic documentation can be found here.

HTML/CSS: How to position child element on top of another while keeping the space?

I have two elements with some text:

child1: 'one two three four'
child2: 'one two'
  1. I want to put child2 on top of child1 like this.
  2. I also want the parent element to take as much space as child1 (the bigger one).

So far I was able to accomplish only point 1 like this:

<!DOCTYPE html>
<html>

<head>
    <style>
        #parent {
            background-color: gray;
        }

        #child1 {
            position: fixed;
        }

        #child2 {
            position: sticky;
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <div id="parent">
            <span id="child1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. Cras convallis eu magna id dignissim. Quisque leo sem, suscipit vitae gravida at, dapibus et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et tortor hendrerit, cursus risus non, viverra tellus. Aliquam laoreet erat risus, eu pulvinar tortor vulputate nec. Etiam velit ipsum, gravida eu iaculis ut, mollis vitae arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum consectetur neque, nec porta justo tincidunt vitae. Curabitur metus nisl, dictum ut turpis a, dignissim venenatis dolor.
            </span>
            <span id="child2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
            </span>
        </div>
        <div id="nextElem">##############</div>
    </div>
</body>

</html>

How to make parent div take as much space as child1? Or take as much space as needed to fit all children?
Is there a way to do that without specifying absolute size for the parent?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    #parent {
    position: relative;
    background-color: gray;
}

#child2 {
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

    From https://www.freecodecamp.org/news/how-to-center-an-absolute-positioned-element/

    Applying a relative position to the container gives the absolute element a boundary. Absolute elements are bounded by the closest relative positioned parent. But if none of that exists, they will be bounded by the viewport.


  2. 0

    Probably need to use inline-flex, like so:

    #parent {
            background-color: gray;
            display: inline-flex;
        }

        #child1 {
            flex: 1 1 auto;
            display: inline-flex;
        }

        #child2 {
            position: absolute;
            color: red;
        }
    <div>
        <div id="parent">
            <span id="child1">
                one two three four
            </span>
            <span id="child2">
                one two
            </span>
        </div>
        <div id="nextElem">##############</div>
    </div>
    #parent {
            background-color: gray;
            display: inline-flex;
        }

        #child1 {
            flex: 1 1 auto;
            display: inline-flex;
        }

        #child2 {
            position: absolute;
            color: red;
        }
        <div>
        <div id="parent">
            <span id="child1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. Cras convallis eu magna id dignissim. Quisque leo sem, suscipit vitae gravida at, dapibus et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et tortor hendrerit, cursus risus non, viverra tellus. Aliquam laoreet erat risus, eu pulvinar tortor vulputate nec. Etiam velit ipsum, gravida eu iaculis ut, mollis vitae arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum consectetur neque, nec porta justo tincidunt vitae. Curabitur metus nisl, dictum ut turpis a, dignissim venenatis dolor.
            </span>
            <span id="child2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
            </span>
        </div>
        <div id="nextElem">##############</div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search