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

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

相关·内容

可编辑div定位光标和设置光标

HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。...,HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的。...当你点击一个输入框,或者你切换到别的输入框,selection 是会跟着变化的,而光标就是selection里面,叫做range,是一个片段区域,和selection一样,有开始点和结束点,当我们对文字按左键向右拉的时候...,就看到了文字变成蓝色,那个就是光标的开始和结束,当我们直接点一的时候,光标闪,其实只是开始和结束点重叠了。...DOCTYPE html> 可编辑div定位和设置光标

9.1K20

CSS 定位布局 - 绝对、固定定位设置居中悬浮div

仅供学习,转载请注明出处 讨论的问题 在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中,发现当使用定位布局的时候,存在一个无法使用margin居中的方法。...下面写一个示例重现一问题,如下: 首先写一个使用margin:50px auto方式居中的div看看。 ? 从上图可以看出使用margin:50px auto进行自动浏览器居中。...下面设置一相对定位,看看会不会影响这种居中效果 ? 从上图可以看出相对定位并不会影响margin居中布局。 设置一绝对定位,看看会不会影响这种居中效果 ?...绝对定位的情况,设置div居中布局 居中布局当然就要先使用left偏移来进行设置,不过这次偏移需要用百分比,不然浏览器稍微缩放就无法居中了。 ? ?...好了,从上面来看,绝对定位已经可以设置div居中了,那么固定定位是否也是如此呢? 固定定位设置div居中 ? ?

3.3K20

仅使用一个 DIV 配合 CSS 实现饼状图

我们只使用一个div,仅采用css实现饼状图。...看文字也许有些难懂,结合下面的插图理解下: 添加动画 到现在为止,我们实现的是一个静止的饼状图。我们接下来为它加上动效。...animation: p 1s .5s both; 嘿嘿~ 复制下面的代码体验一吧。当然,我们也提供了 Gif 图(见文末)。...from{--p:0} } 效果图: 后话 原文 - How to Create a Pie Chart Using Only CSS 遗憾的是,上面所用到的技术现存的浏览器不是很广泛地支持,你可以Can...请你谷歌内核的浏览器上面去尝试博文展示的效果。 PS:当然,如果你做内部系统的话,完全不用担心支持的问题,请规范你的团队对浏览器的使用。 【完】

98920
领券