Question

我一直试图放置一个圆圈，其位置固定在div的右角中间。

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

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="black-box">
                    <span class="circle"></span>
            </div>
    </body>
</html>

CSS：

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

我希望圈子，即使浏览器调整大小，也能保持在正确的位置。

提前致谢。

Answer 1

由于您使用百分比作为宽度，因此当屏幕宽度发生变化时，它会发生变化。我建议使用像素宽度。您始终可以添加媒体查询以更改某些断点处的宽度。这将确保圆圈永不移动。请参阅以下代码：

＆＃13;

#black-box {
    position: fixed;
    width: 420px;
    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: 50px;
    left: 390px;
    content: '\25CF';
    font-size: 100px;
    opacity: 1;
    filter: alpha(opacity=100);
    color: orange;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="black-box">
                    <span class="circle"></span>
            </div>
    </body>
</html>

＆＃13;

Answer 2

您可以使用弹性盒模型：

<强> 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;
}

https://jsfiddle.net/pablodarde/y6nexkkk/

将圆圈放在div的中间右上角

2 个答案: