首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在一个DIV下定位2个DIV

,可以使用CSS的定位属性来实现。常用的定位属性有相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。

相对定位(relative)是相对于元素在文档流中的位置进行定位,不会脱离文档流。可以通过设置top、bottom、left和right属性来调整元素的位置。

绝对定位(absolute)是相对于最近的已定位的祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始包含块进行定位。可以通过设置top、bottom、left和right属性来调整元素的位置。

固定定位(fixed)是相对于浏览器窗口进行定位,不会随滚动条的滚动而改变位置。可以通过设置top、bottom、left和right属性来调整元素的位置。

下面是一个示例代码,演示如何在一个DIV下定位2个DIV:

代码语言:txt
复制
<style>
    .container {
        position: relative;
        width: 500px;
        height: 300px;
        border: 1px solid #000;
    }

    .box1 {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 100px;
        background-color: red;
    }

    .box2 {
        position: absolute;
        top: 150px;
        left: 250px;
        width: 200px;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

在上述代码中,我们创建了一个容器DIV(class为container),并设置其position为relative,表示相对定位。然后在容器DIV内部创建了两个DIV(class为box1和box2),并设置它们的position为absolute,通过设置top、left属性来调整它们的位置。

box1的位置为相对于容器DIV的左上角向右偏移50px,向下偏移50px,宽度为200px,高度为100px,背景颜色为红色。

box2的位置为相对于容器DIV的左上角向右偏移250px,向下偏移150px,宽度为200px,高度为100px,背景颜色为蓝色。

这样就实现了在一个DIV下定位2个DIV的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分22秒

寒冷冬日,送Ta一杯咖啡☕,暖暖Ta的心❤

6分39秒

iOS一个公司能上架多少个APP

3分40秒

Elastic 5分钟教程:使用Trace了解和调试应用程序

14分24秒

【玩转腾讯云】COS+数据万象+CDN 产品使用分享

-

奥运闭幕之际,看看各家对奥运转播的新玩法

2分10秒

服务器被入侵攻击如何排查计划任务后门

8分29秒

16-Vite中引入WebAssembly

2分22秒

Elastic Security 操作演示:上传脚本并修复安全威胁

1时30分

FPGA中AD数据采集卡设计

48秒

5、uos下apt安装hhdbcs

10分18秒

开箱2022款Apple TV 4K,配备A15芯片的最强电视盒子快速上手体验

4分29秒

MySQL命令行监控工具 - mysqlstat 介绍

领券