幽夜莫知途 2021-08-05 18:09 采纳率: 21.4%
浏览 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日