论坛 › Web开发 › position的一些问题

影追音 发表于 2021-5-15 22:55:13

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靠右的解决方案

影追音 发表于 2021-5-16 14:34:02

研究了一天= =，终于找到了方法，可以把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 发表于 2021-5-16 19:17:23

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

Darth_EF 发表于 2021-5-17 00:39:23

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

查看完整版本: position的一些问题