Stacking divs relative and absolute positions

Question

I'm having a lot of trouble trying to make a layout. I'm trying to make a box overlap an image, I'm trying to use absolute/relative positions but I think I'm doing it wrong. here is the layout

here is the code i have so far:

   .trabalhos{
 position: relative;
 margin-top: 100px;
 width: 100%;
 max-width: 960px;
    }
    
    .caixa{
 position: absolute;
 left: 0%;
 top: auto;
 right: auto;
 bottom: 10%;
 overflow: visible;
 width: 30%;
 height: auto;
 padding: 25px;
 border-radius: 10px;
 background-color: #333;
 color: white;
    }
    
    #trabalhos-img-right{
 float: right;
    }

    #trabalhos-img-left{
 float: left;
    }

    #esquerda{
 text-align: right;
    }

    #direita{
 text-align: left;
 right: 0%;
 left: auto;
    }

<div class="section-trabalhos">
  <div class="container">
   <h1>blablablablabla</h1>

   <div class="trabalhos">
    <div><img id="trabalhos-img-right" src="img-01.png"></div>
    <div class="caixa" id="esquerda">
     <h2>Lorem ipsum</h2>
     <p>blablabla</p>
    </div>
   </div>

   <div class="trabalhos trabalhos_2">
    <div><img id="trabalhos-img-left" src="img-01.png"></div>
    <div class="caixa" id="direita">
     <h2>Lorem ipsum</h2>
     <p>blablabla</p>
    </div>
   </div>

I'll have to make 8 of those, what is the best way?

Thanks in advance

Possible duplicate of [Position absolute but relative to parent](https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) — RisingSun, Mar 13 '19 at 20:10

score 0 · Answer 1 · 2019-03-14T17:30:57.723

0

This CodePen could be the solution. Just replace the svg element in the html and css code with your image and you're all set.

Also, this website can help you understanding the position property.

HTML

<div class="container">
  <svg width="400" height="110">
    <rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
  </svg>
  <div class="description">
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </div>
</div>

<div class="containersecond">
  <svg width="400" height="110">
    <rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
  </svg>
  <div class="description">
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </div>
</div>

CSS

svg {
  position: relative;
  left: 30px;
}

.description {
  background-color: red;
  width: 300px;
  position: absolute;
  top: 70px;
}

.containersecond {
  position: absolute;
  top: 300px;
}

edited Mar 14 '19 at 17:30

answered Mar 13 '19 at 19:43

i do need to study it more :/ i find it very confusing. i tried your code, but if i make another "image" and description using the same classes, they overlap each other. do i have to use another classes? even so, i tried and still couldnt figure out – Isabella Bertolli Mar 13 '19 at 19:57
I just added a second image and I edited my answer. Note that if you use the 'absolute' position, your image will be moved relative to the edge of the screen. If you use the 'relative' position, your image will be moved relative to the bottom edge of the image above. If you need some courses, I can recommend Codecademy or FreeCodeCamp to you. Also Sololearn provides some good courses, with a variety of languages. – Mar 14 '19 at 17:33

score 0 · Answer 2 · answered Mar 13 '19 at 19:56

I hope that I have solved this problem

<html>
<head>



<style>

    .trabalhos{
        width:100%;
        max-width: 960px;
        height: 60%;
        margin-top: 100px;
        position: relative;
    }

    .img{
        width:80%;
        height: 100%; /*Do not change it*/
    }

    .caixa{
        position: absolute;
        bottom:10%;
        overflow: visible;
        width: 30%;
        height: auto;
        padding: 25px;
        border-radius: 10px;
        background-color: #333;
        color: white;
    }




#trabalhos-img-right{
    float: right;
}

#trabalhos-img-left{
    float: left;
}

#esquerda{
    text-align: right;
    left: 0px    
}

#direita{
    text-align: left;
    right: 0px;
}  

    #trabalhos-img{
        width: 100%; /*Do not change it*/
        height: 100%; /*Do not change it*/
    }        


</style>

</head>



<body>

    <div class="trabalhos">

        <div id="trabalhos-img-right" class="img">
          <img id="trabalhos-img" src="img-01.png" /></div>
        <div class="caixa" id="esquerda">
            <h2>Lorem ipsum</h2>
            <p>blablabla</p>
        </div>
    </div>

     <div class="trabalhos">

        <div id="trabalhos-img-left" class="img">
          <img id="trabalhos-img" src="img-01.png" /></div>
        <div class="caixa" id="direita">
            <h2>Lorem ipsum</h2>
            <p>blablabla</p>
        </div>
    </div>


</body>

Stacking divs relative and absolute positions

2 Answers2