首页
学习
活动
专区
工具
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的效果。

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

相关·内容

共43个视频
Web前端网页制作初级教程
学习猿地
本阶段主要围绕div+css浮动布局,配合HTML常用语义化标签以及CSS样式属性,搭建自己的前端CMS页面。为第一个项入门级动态项目“CMS系统”做准备。
领券