CODEWITHSUNDEEP
csshtml
Ege Ersoz
Ege Ersoz

Reputation: 6571

Positioning a button on top of a canvas

I'm trying to position a font-awesome button on top of a canvas. My current markup:

<li id="container">
    <i class="fa fa-plus"></i>
    <canvas></canvas>
</li>

The container and the canvas are visible by default. When the user mouse-overs the container, the button also appears. However, it pushes the canvas downward, causing it to spill out of the container:

enter image description here

The container has position: absolute and I don't have any control over that (it's part of a plugin I'm using). I do have full control over the styling of the canvas and the button.

What makes this tricky is that the user can resize the container, and the button has to remain on the top center of it at all times. Currently that works fine, but I can't get it to also appear on top of the canvas.

Upvotes: 2

Views: 1909

Answers (3)

0x860111
0x860111

Reputation: 386

Hover to see i. 

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #F72F4E;
}

#container {
  position: absolute;
  width: 50vmin;
  height: 50vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.2);
}
#container:hover i {
  opacity: 1;
  transition: opacity .2s ease-out;
}
#container i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease-in;
}
#container canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid green;
}
<li id="container">
    <i class="fa fa-plus">i</i>
    <canvas></canvas>
</li>

Upvotes: 1

Ege Ersoz
Ege Ersoz

Reputation: 6571

Resolved it by changing the font-awesome element to a div and setting its height to 0. It's z-index was already larger than that of the canvas.

Upvotes: 0

E.Arrowood
E.Arrowood

Reputation: 770

Have you tried to utilize the z-index? If you don't know what it is you can read up on it here: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Essentially, you will have the button sit on top of all other elements. Hope this gives some guidance.

Also! Just thought of this, try to mess around with the position property. http://www.w3schools.com/cssref/pr_class_position.asp

The 'fixed' value will position your button relative to the DOM window, meaning other elements shouldn't have an effect on its position.

Upvotes: 0

Related Questions