V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zxCoder
V2EX  ›  问与答

请教一个 css 的问题

  •  
  •   zxCoder · 2021-03-29 19:59:22 +08:00 · 1285 次点击
    这是一个创建于 1338 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    16 条回复    2021-03-30 16:47:33 +08:00
    zhizunzz
        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
    zxCoder
        2
    zxCoder  
    OP
       2021-03-29 20:09:46 +08:00
    @zhizunzz 这样位置不对吧 我希望刚好是在中间这部分的右边
    jatai
        3
    jatai  
       2021-03-29 20:15:30 +08:00 via Android
    赌一块钱,v2 至少有一半人不会做😊
    snoopyhai
        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;
    kaiki
        5
    kaiki  
       2021-03-29 20:27:19 +08:00
    你想要一个一般网站的回到顶部按钮那样的 a 标签吗?那就 left:50%,mragin-left:宽度 /2 px
    qiayue
        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;
    }
    zxCoder
        7
    zxCoder  
    OP
       2021-03-29 21:44:24 +08:00
    @snoopyhai
    @qiayue
    还是不太行,这样 a 标签直接到浏览器最右边了,我希望是在中间那部分 720px 的右边
    zxCoder
        8
    zxCoder  
    OP
       2021-03-29 21:49:59 +08:00
    @snoopyhai
    @qiayue

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

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

    两位大哥看错题目了。。。
    EridanusSora
        15
    EridanusSora  
       2021-03-30 11:02:56 +08:00
    跟随滚动的话看下 position: sticky;
    Hoshinokozo
        16
    Hoshinokozo  
       2021-03-30 16:47:33 +08:00
    4 楼正解,绝对定位的基准是最近的一级具有相对定位的祖先元素,给 div 加上 position:relative,a 标签写在 div 里,加上 position:absolute 就行了,位置自己慢慢调
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5078 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 09:46 · PVG 17:46 · LAX 01:46 · JFK 04:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.