这是一个创建于 1367 天前的主题，其中的信息可能已经有所发展或是发生改变。
我的 html 是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
border: 1px black solid;
margin: auto;
max-width: 720px;
text-align: left;
}
</style>
</head>
<body>
<div>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</body>
</html>
然后我希望在不改这个 body 框架的基础上，我希望有一个 a 标签固定刚好在中间这个 div 的右边，我现在只知道加个position:fixed;，但是左右的位置不知道怎么确定
 |
1
zhizunzz 2021-03-29 20:06:49 +08:00
<a href="url" style="position:fixed;top:20px;right:2px;">link</a>
参见: https://www.runoob.com/css/css-positioning.html |
 |
3
jatai 2021-03-29 20:15:30 +08:00 via Android
赌一块钱，v2 至少有一半人不会做😊
|
 |
4
snoopyhai 2021-03-29 20:17:20 +08:00 via Android  1
给 div position:relative;
然后 a 放在 div 里面 给 a position:absolute;top:0;right:0; |
 |
5
kaiki 2021-03-29 20:27:19 +08:00
你想要一个一般网站的回到顶部按钮那样的 a 标签吗？那就 left:50%，mragin-left:宽度 /2 px
|
 |
6
qiayue 2021-03-29 20:33:50 +08:00 1
你要相对于 div 定位，那么就要把 a 放进 div 里边去，然后配合 4 楼的 css，稍微改一下
div{ position:relative; } a{ display:block; position:absolute; width:50px; height:50px; top:50%; right:-50px; margin-top:-25px; } |
 |
7
zxCoder OP |
|
10
qiayue 2021-03-29 22:45:01 +08:00
强烈建议你自己多试试，这才是学习的太多，而不是什么都靠别人喂。
|
 |
11
yunyuyuan 2021-03-30 09:11:19 +08:00
要居中有一个骚操作永远管用：
position: absolute; top: 50%; transform: translateY(-50%); |
 |
12
ke2933 2021-03-30 09:29:26 +08:00
上下左右均居中,且不知容器宽高
1：position: 'absolute', top: 0,left:0,right:0,bottom:0, margin: auto, 2：position: absolute，top: 50%，left:50%,transform: translateY(-50%),transform: translateX(-50%), 3: flex |
 |
14
KouShuiYu 2021-03-30 10:31:40 +08:00
|
 |
15
EridanusSora 2021-03-30 11:02:56 +08:00
跟随滚动的话看下 position: sticky;
|
 |
16
Hoshinokozo 2021-03-30 16:47:33 +08:00
4 楼正解，绝对定位的基准是最近的一级具有相对定位的祖先元素，给 div 加上 position:relative，a 标签写在 div 里，加上 position:absolute 就行了，位置自己慢慢调
|
Select Language