请教一个 css 的问题

2021-03-29 19:59:22 +08:00
 zxCoder

我的 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;，但是左右的位置不知道怎么确定

1281 次点击
所在节点    问与答
16 条回复
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
zxCoder
2021-03-29 20:09:46 +08:00
@zhizunzz 这样位置不对吧 我希望刚好是在中间这部分的右边
jatai
2021-03-29 20:15:30 +08:00
赌一块钱，v2 至少有一半人不会做😊
snoopyhai
2021-03-29 20:17:20 +08:00
给 div position:relative;
然后 a 放在 div 里面
给 a position:absolute;top:0;right:0;
kaiki
2021-03-29 20:27:19 +08:00
你想要一个一般网站的回到顶部按钮那样的 a 标签吗？那就 left:50%，mragin-left:宽度 /2 px
qiayue
2021-03-29 20:33:50 +08:00
你要相对于 div 定位，那么就要把 a 放进 div 里边去，然后配合 4 楼的 css，稍微改一下
div{
position:relative;
}
a{
display:block;
position:absolute;
width:50px;
height:50px;
top:50%;
right:-50px;
margin-top:-25px;
}
zxCoder
2021-03-29 21:44:24 +08:00
@snoopyhai
@qiayue
还是不太行，这样 a 标签直接到浏览器最右边了，我希望是在中间那部分 720px 的右边
zxCoder
2021-03-29 21:49:59 +08:00
@snoopyhai
@qiayue

是我弄错了 这样是可以的 多谢
zxCoder
2021-03-29 21:55:27 +08:00
@snoopyhai
@qiayue

请问有办法在滚动的时候能固定在现在这个位置吗。。。
qiayue
2021-03-29 22:45:01 +08:00
强烈建议你自己多试试，这才是学习的太多，而不是什么都靠别人喂。
yunyuyuan
2021-03-30 09:11:19 +08:00
要居中有一个骚操作永远管用：
position: absolute;
top: 50%;
transform: translateY(-50%);
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
zxCoder
2021-03-30 09:31:07 +08:00
@yunyuyuan
@ke2933

两位大哥看错题目了。。。
KouShuiYu
2021-03-30 10:31:40 +08:00
没懂什么意思！这样?
![https://ae01.alicdn.com/kf/U95ea2e4b239e44a389b6dbd16f297d43o.jpg]( https://ae01.alicdn.com/kf/U95ea2e4b239e44a389b6dbd16f297d43o.jpg)
EridanusSora
2021-03-30 11:02:56 +08:00
跟随滚动的话看下 position: sticky;
Hoshinokozo
2021-03-30 16:47:33 +08:00
4 楼正解，绝对定位的基准是最近的一级具有相对定位的祖先元素，给 div 加上 position:relative，a 标签写在 div 里，加上 position:absolute 就行了，位置自己慢慢调

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/766276

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX