Css，加到 100% [calc (100% + __)]

Question

当您将鼠标悬停在 div 上时，我试图在屏幕的上角显示一个圆圈

我想我会做一个计算，考虑到圆圈的高度和宽度是 200 像素，我在顶部和侧面的屏幕的 100% 上添加了 100 像素，这样它就会将它推过屏幕边缘 100 像素。

这是位置变化的圆的css

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

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

问题是什么都没有显示

我不确定这是否只是一个 css 限制，或者为什么它不会显示问题，因为我希望它在那里并且能够响应

如果有其他更好的方法可以达到相同的效果，请告诉我

谢谢

Answer 1

设置top为0，left为0并使用CSS transform translate属性：

  #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>

Answer 2

right: calc(100% + 100px);
top: calc(100% + 100px);

这样，您将圆放置在距顶部 100 % + 100 px 处，距右侧 100 % + 100 px 处。将圆圈放置在距左下角 100 像素的位置。如果你想要它在右上角，你必须将 top 和 right 设置为 0，如果你想要它在左角，你会删除 right: 0; 并放入 left: 0;

Answer 3

另一种方法是根本不费心调整位置，为什么不将边框半径应用于元素的一个角？

calc 和 translateX/Y 都很棒，但为什么过于复杂很重要？

.circle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100px;
  width: 100px;
  background: #f90;
  border-radius: 0 0 0 100%;
}

<div class="circle"></div>