I wanted to have two similar "mole" divs on my html document-CodePudding

this is the result i want to get

and this is what i've got so far

I've tried putting those two divs with class "wgs" into another div with "block" class and tried the "display: inline-block". But with or without that div it looked the same on the page.

My html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mole.css">
    <script type="text/javascript" src="mole.js"></script>
  </head>
  <body>

      <div >
        <img src="mole-head.png"  alt="mole-head">
        <img src="mole-hill.png"  alt="mole-hill">
      </div>

      <div >
        <img src="mole-head.png"  alt="mole-head">
        <img src="mole-hill.png"  alt="mole-hill">
      </div>

My CSS code:

.wgs {
  display: inline-block;
  height: 482px;
  position: absolute ;
  width: 640px;
}

.wgs__mole-head {
  display;
  height: 356px;
  position: absolute;
  width: 376px;
  margin-left: 109px;
}

.wgs__dirt-pile {
  height: 220px;
  position: absolute;
  width: 640px;
  bottom: 0;
}

What am i doing wrong to achieve the result i'm trying to achieve?

CodePudding user response：

See MDN:

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which is the containing block of the document's root element.

You've absolutely positioned the .wgs elements without constraining them using a containing block.

Consequently they are positioned with respect to the whole document.

You do have two moles. They are just in the same position so one is hidden behind the other.

You probably intended .wgs to be position: relative.