Html 将圆放置在div的右中角

我一直在尝试放置一个圆，位置固定在div右角的中间

问题是：当我调整浏览器的大小时，圆圈的位置会改变。代码如下：

HTML:

我希望圆圈，保持它的位置在正确的地方，即使浏览器的大小

---

提前感谢。

因为您使用百分比作为宽度，所以当屏幕宽度改变时，百分比会改变。我建议使用像素宽度。始终可以添加媒体查询以更改某些断点处的宽度。这将确保圆永远不会移动。见下面的代码：

#黑盒{
位置：固定；
宽度：420px；
左：0；
排名：0；
底部：0；
背景：黑色；
不透明度：0.7；
过滤器：α（不透明度=50）；
z指数：3；
-webkit过滤器：模糊（1px）；
-moz滤波器：模糊（1px）；
-o-滤波器：模糊（1px）；
-ms过滤器：模糊（1px）；
滤镜：模糊（1px）；
}
/*“黑匣子”圈*/
.圆圈：之前{
位置：固定；
顶部：50px；
左：390px；
内容：'\25CF'；
字体大小：100px；
不透明度：1；
过滤器：α（不透明度=100）；
颜色：橙色；
}

试验

您可以使用flex box型号：

css

#black-box {
    position: fixed;
    width: 28.3%;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: black;
    opacity: 0.7;
    filter: alpha(opacity=50);
    z-index: 3;

    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

/* "BLACK BOX" CIRCLE */
.circle {
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 1;
    filter: alpha(opacity=100);
    background: orange;
}

---

“在右拐角的中间”。。。你的意思是在右边的中间吗？我不太确定你想要什么，但你应该从这样一个简单的例子开始：这样我们可以帮助你更深入地理解，而不仅仅是一个快速修复。

#black-box {
    position: fixed;
    width: 28.3%;
    left: 0;
    top: 0;
    bottom: 0;
    background: black;
    opacity: 0.7;
    filter: alpha(opacity=50);
    z-index: 3;

    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

/* "BLACK BOX" CIRCLE */
.circle:before {
    position: fixed;
    top: 41%;
    left: 26.6%;
    content: '\25CF';
    font-size: 100px;
    opacity: 1;
    filter: alpha(opacity=100);
    color: orange;
}

#black-box {
    position: fixed;
    width: 28.3%;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: black;
    opacity: 0.7;
    filter: alpha(opacity=50);
    z-index: 3;

    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

/* "BLACK BOX" CIRCLE */
.circle {
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 1;
    filter: alpha(opacity=100);
    background: orange;
}