
我的 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 给 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 a href="/member/qiayue" class="dark">qiayue PRO 你要相对于 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 PRO 强烈建议你自己多试试,这才是学习的太多,而不是什么都靠别人喂。 |
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 就行了,位置自己慢慢调 |