跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 请教一个 css 的问题
未分類
30 3 月 2021

请教一个 css 的问题

请教一个 css 的问题

資深大佬 : zxCoder 0

我的 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)

  • 資深大佬 : zhizunzz

    <a href=”url” style=”position:fixed;top:20px;right:2px;”>link</a>

    参见: https://www.runoob.com/css/css-positioning.html

  • 主 資深大佬 : zxCoder

    @zhizunzz 这样位置不对吧 我希望刚好是在中间这部分的右边

  • 資深大佬 : jatai

    赌一块钱,v2 至少有一半人不会做

  • 資深大佬 : snoopyhai

    给 div position:relative;
    然后 a 放在 div 里面
    给 a position:absolute;top:0;right:0;

  • 資深大佬 : kaiki

    你想要一个一般网站的回到顶部按钮那样的 a 标签吗?那就 left:50%,mragin-left:宽度 /2 px

  • 資深大佬 : qiayue

    你要相对于 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

    @snoopyhai
    @qiayue
    还是不太行,这样 a 标签直接到浏览器最右边了,我希望是在中间那部分 720px 的右边

  • 主 資深大佬 : zxCoder

    @snoopyhai
    @qiayue

    是我弄错了 这样是可以的 多谢

  • 主 資深大佬 : zxCoder

    @snoopyhai
    @qiayue

    请问有办法在滚动的时候能固定在现在这个位置吗。。。

  • 資深大佬 : qiayue

    强烈建议你自己多试试,这才是学习的太多,而不是什么都靠别人喂。

  • 資深大佬 : yunyuyuan

    要居中有一个骚操作永远管用:
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

  • 資深大佬 : ke2933

    上下左右均居中,且不知容器宽高
    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

    @yunyuyuan
    @ke2933

    两位大哥看错题目了。。。

  • 資深大佬 : KouShuiYu

    没懂什么意思!这样?
    ![https://ae01.alicdn.com/kf/U95ea2e4b239e44a389b6dbd16f297d43o.jpg]( https://ae01.alicdn.com/kf/U95ea2e4b239e44a389b6dbd16f297d43o.jpg)

  • 資深大佬 : EridanusSora

    跟随滚动的话看下 position: sticky;

  • 資深大佬 : Hoshinokozo

    4 正解,绝对定位的基准是最近的一级具有相对定位的祖先元素,给 div 加上 position:relative,a 标签写在 div 里,加上 position:absolute 就行了,位置自己慢慢调

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具