鱼C论坛

 找回密码
 立即注册
查看: 6363|回复: 3

position的一些问题

[复制链接]
发表于 2021-5-15 22:55:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
        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靠右的解决方案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 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>
这样既实现了自适应,又没有扰乱布局= =

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-16 19:17:23 | 显示全部楼层
绝对定位不好吗  正经人谁用浮动  弹性盒的align-self属性也行啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-17 00:39:23 | 显示全部楼层
楼上说的对,正经人谁用浮动啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 14:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表