在div的右中角放置圆
在div的右中角放置圆
提问于 2017-04-08 02:37:09
我一直在尝试放置一个圆，其位置固定在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;
}我希望圆圈保持在正确的位置，即使浏览器调整了大小。
提前谢谢。
回答 2
Stack Overflow用户
发布于 2017-04-08 03:03:47
由于您使用百分比作为宽度，因此当您的屏幕宽度发生变化时，它将发生变化。相反，我建议使用像素宽度。您可以随时添加媒体查询，以更改某些断点处的宽度。这将确保圆永远不会移动。请看下面的代码：
#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>
Stack Overflow用户
发布于 2017-04-08 04:27:47
您可以使用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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43285015
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号