幽夜莫知途 2021-08-05 18:09 采纳率: 25%
浏览 84
已结题

html5的样式问题

我想实现一个效果，给div 2慢慢增加高度，然后将上面div 1逐渐往上抬，也就是div 2加高时不是向下填充扩张，而是保持div 2底部边不动，向上扩张，这个怎么做求舅。

  • 写回答

4条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-08-06 13:55
    关注

    思路就是上面的盒子是要由下面的盒子决定位置，所以要用绝对定位，将上面盒子依据下面盒子定位，下面的盒子同样也要固定自己的定位，我这里是用fixed固定，你改成绝对定位也行，然后你试着修改box2的高度就会发现box1被抬高了，你看看是不是你想要的，希望采纳呀！！

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box1 {
        background-color: aqua;
        width: 200px;
        height: 200px;
        position: absolute;
        top: -200px;
        left: 0;
    }

    #box2 {
        background-color: red;
        width: 200px;
        height: 300px;
        position: fixed;
        bottom: 0;
        left: 0;
    }
</style>

<body>
    <div id="box2">
        <div id="box1"></div>
    </div>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 8月14日
  • 已采纳回答 8月6日
  • 创建了问题 8月5日

悬赏问题

  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿