Gabe Gabe - 27 days ago 9
CSS Question

Css, adding to 100 percent [calc (100% + __)]

I was trying to get a circle in the top corner of the screen when you hover over a div

I figured I would do a calculation, considering the height and width of the circle is 200px, I added 100px to 100% of the screen on both the top and side so it would push it 100px past the edge of the screen.

Here is the css of the circle with the position change

#circle{
border-radius: 50%;
width: 200px;
height: 200px;
background-color:blue;

position: absolute;
right: calc(100% + 100px);
top: calc(100% + 100px);
}


The problem being that nothing displays

I'm not sure if this is just a css limitation or why it wouldn't display problem being that I want it to be there and be responsive

If there is a different better way to get the same effect please let me know

Thanks

Answer

Set the top to 0 and the left to 0 and use CSS transform translate property:

  #circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 0;
    top: 0;
    transform:translate(-50%,-50%);
  }
<div id="circle"></div>