gpt4 book ai didi

html - 将圆圈放在 div 的右中 Angular

转载 作者:行者123 更新时间:2023-11-28 03:59:31 25 4
gpt4 key购买 nike

我一直在尝试放置一个圆圈,位置固定在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;
}

我希望圆圈保持在正确的位置,即使浏览器的大小发生变化也是如此。

提前致谢。

最佳答案

由于您使用百分比作为宽度,因此它会随着屏幕宽度的变化而变化。相反,我建议使用以像素为单位的宽度。您始终可以添加媒体查询以更改某些断点处的宽度。这将确保圆圈永远不会移动。见下面的代码:

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

关于html - 将圆圈放在 div 的右中 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43285015/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com