position的一些问题

影追音

        div{
            position: sticky;
            bottom: 0%;
        }
        .d1{
            background-color: rgb(0, 0, 0);
            z-index: -1;
        }
        .d2{
            background-color: rgb(0, 0, 0);
            /* background-position: 100% 0%; */
            background-position-x: right;
            right: 0;
            z-index: -2;
        }        
        .d3{
            background-color: rgb(0, 0, 0);
            z-index: -3;
        }
css如上；
html里是3个div里嵌套了img标签
        <div class="d1"><img src="xxx" alt="xxx"></div>
        <div class="d2"><img src="xxx" alt="xxx"></div>
        <div class="d3"><img src="xxx" alt="xxx"></div>

我想把布局整成这样
d1
        d2
d3
但是我用了position，background-position，都没有用（一点反应都没有），float可以做到但是会扰乱布局，padding又不能自适应大小，求大佬能给出一个让d2靠右的解决方案

影追音

研究了一天= =，终于找到了方法，可以把float限定在一个div里，改动很简单，就是把class="d2"从div移到img里
        div{
            background-color: rgb(0, 0, 0);
            position: sticky;
            bottom: -10%;
            height: 720px;
        }
        .d1{
            z-index: 2;
        }
        .d2{
            float: right;
        }
        .d3{
            z-index: -1;
        }
css如上；
html里是3个div里嵌套了img标签
        <div class="d1"><img src="xxx" alt="xxx"></div>
        <div><img class="d2" src="xxx" alt="xxx"></div>
        <div class="d3"><img src="xxx" alt="xxx"></div>
这样既实现了自适应，又没有扰乱布局= =

kogawananari

绝对定位不好吗  正经人谁用浮动  弹性盒的align-self属性也行啊

Darth_EF

楼上说的对，正经人谁用浮动啊