CODEWITHSUNDEEP
htmlcsscss-position
DVCITIS
DVCITIS

Reputation: 1037

What default CSS is preventing me from fully overlapping two elements with relative positioning?

Why don't #img1 and #canvas1 fully overlap in the below code? I want them in exactly the same place. I'm layering images with JavaScript animation on canvas. Initial thoughts were that the padding or margin default settings were interfering somewhere. I've tried setting to zero for all elements - it doesn't work. I understand that position:relative positions an element relative to it's normal position. Clearly missing a default setting or something obvious.

<!DOCTYPE html>
<html>

<head>
  <style>
    .chapter {
      width: 90%;
      margin: 0 auto;
      max-width: 1000px;
      border: 1px solid red;
    }
    
    #img1 {
      border: 1px solid green;
      position: relative;
      left: 50px;
      height: 100px;
      width: 100px;
      margin: 0px;
      padding: 0px;
    }
    
    #canvas1 {
      border: 1px solid blue;
      position: relative;
      left: -50px;
      height: 100px;
      width: 100px;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div class="template" id="T2">
    <div class="chapter" id="C2">
      <h1>Why can't I overlap the below elements?</h1>
      <img src="" id="img1" />
      <canvas id="canvas1"></canvas>
    </div>
  </div>

</html>

Upvotes: 0

Views: 57

Answers (4)

Thijs
Thijs

Reputation: 2351

A couple of remarks:

  • use box-sizing: border-box for 'easier' sizing. With border-box the border width and padding are substracted from the elemenent istead of added on to it. An element with width: 100px, a border-width of 1px and a padding of 10px will be 100 + (2 * 1) + (2 * 10) = 122px wide without box-sizing: border-box but the element will be 100px wide even with the border-width and padding when the box-sizing is set to border-box. See here for a (better) more detailed explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  • When trying to overlap element I find it easiest to keep the surrounding container element as empty as possible. Taking out the h1 element makes overlapping a lot more manageable.

  • Change the position of the canvas element to absolute. This way it no longer takes up place in the DOM and it is positioned in the upper left container of its positioning parent (in your example the div.chapter in my answer the div.container). This also helps when trying to have elements line up.

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.chapter {
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  border: 1px solid red;
}

#img1 {
  border: 1px solid green;
  position: relative;
  left: 50px;
  height: 100px;
  width: 100px;
  margin: 0px;
  padding: 0px;
}

#canvas1 {
  border: 1px solid blue;
  position: absolute;
  left: 50px;
  height: 100px;
  width: 100px;
  margin: 0px;
  padding: 0px;
}
<div class="template" id="T2">
  <div class="chapter" id="C2">
    <h1>Why can't I overlap the below elements?</h1>
    <div class="container">
      <img src="" id="img1" />
      <canvas id="canvas1"></canvas>
    </div>    
  </div>
</div>

Upvotes: 2

rmurph46
rmurph46

Reputation: 874

There are certainly better ways to achieve the effect you're going for but to answer your question, I believe the spacing is being caused by the default font size on the parent element. Set the font size to 0px on the chapter div and you can see the elements now overlap each other.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Two things to do:

1.) Don't leave a linebreak or space between the two elements in the HTML code (see below)

2.) Set the left setting for canvas to -52px - you have to consider the 2 x 1px border of the image.

.chapter {
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  border: 1px solid red;
}

#img1 {
  border: 1px solid green;
  position: relative;
  left: 50px;
  height: 100px;
  width: 100px;
  margin: 0px;
  padding: 0px;
}

#canvas1 {
  border: 1px solid blue;
  position: relative;
  left: -52px;
  height: 100px;
  width: 100px;
  margin: 0px;
  padding: 0px;
}
<div class="template" id="T2">
  <div class="chapter" id="C2">
    <h1>Why can't I overlap the below elements?</h1>
    <img src="" id="img1" /><canvas id="canvas1"></canvas>
  </div>
</div>

Upvotes: 3

Aries Azad
Aries Azad

Reputation: 356

#img1 {
border: 1px solid green;
position: relative;
left: 56px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}

this worked...

Upvotes: 0

Related Questions