在一个div的右下角再添加一个div的方法

最新推荐文章于 2024-03-01 20:12:09 发布

软件测试技术

最新推荐文章于 2024-03-01 20:12:09 发布

阅读量391

点赞数

文章标签：定位 css js javascript html

土法炼钢师呕血之作，转载还望说明出处！

本文链接：https://blog.csdn.net/bo_mask/article/details/118690636

版权

本文介绍了一种使用CSS实现特定布局效果的方法。通过将父元素设置为相对定位，子元素设置为绝对定位，可以精确控制子元素在父元素中的位置。示例中，一个黑色方块被放置在右下角，展示了如何利用相对和绝对定位来创建复杂布局。

摘要由CSDN通过智能技术生成

想完成如下效果：

代码如下：

<div id="header">
    <div id="logo">

    </div>

    <div id="note">
        <p>右下角的内容</p>
    </div>

</div>

css代码：

#header {
    height: 100px;
    width: 1600px;

    background-color: saddlebrown;
    position:relative;
}



#header #note{
    display: inline-block;
    height: 50px;
    width: 800px;
    background-color: black;
    position: absolute;
    right: 0px;
    bottom: 0px;
    
}

父对象相对定位，子对象以父对象为参考点绝对定位；
外层的div设置为相对定位，内层的div设置为绝对定位；