How to shift div over div?-CodePudding

I`m trying to do this example(look at the picture), when i need to move the green div 10px left, and 10 px low, and the blue div, 20 px left and 20 low. but when im trying to add this to CSS(left 10px for example), this doesn't work because there is override of the properties with the other "left". how can i fix this?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #container {
            height: 400px;
            position: relative;
        }

        #leftdiv {

            background-color: red;
            border: 1px solid black;
            position: absolute;
            margin-right: 0px;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 80%;

        }

        #middiv {
            background-color: green;
            position: absolute;
            border: 1px solid black;
            left: 20%;
            top: 10px;
            bottom: 0px;
            right: 30%;


        }

        #rightdiv {

            background-color: blue;
            position: absolute;
            border: 1px solid black;
            left: 70%;
            top: 20px;
            bottom: 0px;
            right: 0px;
        }

        table,
        th,
        td {
            
            border: 1px solid white;
            text-align: center;
            
        }
        table.center {
            left:10%;
            right:10%;
            top:10%;
  margin-left: auto; 
  margin-right: auto;
        }
   </style>


</head>

<body>

    <div id="container">
        <div id="leftdiv"> 
        </div>
        <div id="middiv">
            <table >
                <tr>
                    <td><img src="images/dog.jpg" alt="Italian Trulli">
                    </td>
                    <td><img src="images/cat.jpg" alt="Italian Trulli">
                    </td>

                </tr>
                <tr>
                    <td><p>call *066</p></td>
                    <td><p>call *077</p></td>

                </tr>
               
            </table>
        </div>
        <div id="rightdiv">
            
        </div>
    </div>


</body>

</html>

CodePudding user response：

Please let me know if I did something wrong, you can use z-index and overflow, especially for green and red while you are doing nothing to red div, take a look at this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    #container {
      height: 400px;
      position: relative;
    }

    #leftdiv {
      background-color: red;
      border: 1px solid black;
      position: absolute;
      margin-right: 0px;
      left: 0px;
      top: 0px;
      bottom: 0px;
      right: 80%;
      z-index: 0;
    }

    #middiv {
      background-color: green;
      position: absolute;
      border: 1px solid black;
      left: 18%;
      top: 10%;
      bottom: -10%;
      right: 30%;
      z-index: 1;
      overflow: clip;
    }

    #rightdiv {
      background-color: blue;
      position: absolute;
      border: 1px solid black;
      left: 67%;
      top: 20%;
      bottom: -20%;
      right: 0px;
      z-index: 2;
    }

    table,
    th,
    td {

      border: 1px solid white;
      text-align: center;

    }
    table.center {
      left:10%;
      right:10%;
      top:10%;
      margin-left: auto;
      margin-right: auto;
    }
  </style>


</head>

<body>

<div id="container">
  <div id="leftdiv">
  </div>
  <div id="middiv">
    <table >
      <tr>
        <td><img src="img/img1.PNG" alt="Italian Trulli">
        </td>
        <td><img src="img/img1.PNG" alt="Italian Trulli">
        </td>

      </tr>
      <tr>
        <td><p>call *066</p></td>
        <td><p>call *077</p></td>

      </tr>

    </table>
  </div>
  <div id="rightdiv">

  </div>
</div>


</body>

</html>

Please upvote if I helped you to solve the problem :)