固定定位的盒子如何固定在版心的右侧

377 阅读1分钟

1.让固定定位的盒子left: 50%,走到浏览器可视区(也可以看作版心)的一半位置。 2.让固定定位的盒子margin-left: 版心宽度的一半距离。多走版心宽度的一半位置,就可以让固定定位的盒子贴着版心右侧对齐了。

css部分代码

    .dj {
        width: 800px;
        height: 1400px;
        background-color: blueviolet;
        margin: 0 auto;
    }.fix {
        width: 100px;
        height: 100px;
        background-color: black;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: 405px;
    }
    
 html部分代码
 <div class="fix"></div>
 <div class="dj"></div>
 

效果展示

image.png