CSS中的父相子绝布局

主要应用场景,就是我想要块的布局根据父级来定位,而不是根据页面。
例如,下面的例子中,我用两个半圆拼成一个正圆,思路是用一个父级标签把两个子标签包起来,父标签是一个正圆,然后子标签各占一半,先化成两个矩形,然后就是位置的选择。 这里用到的就是父相子绝,即父标签用到相对位置,子标签用到绝对位置,这样子标签的两个半圆就能贴到父标签,形成一个圆。

注意:

1.这里面父标签需要用相对定位,使用绝对定位的话会脱离文档流,见下面例子。
2.标签写position(relative或者absolute)的话,就会以它的父级标签作为参考,如果父级没写css样式,那就会以body样式作为参考,如果也没写,就会以整个html页面作为参考。例如这里,如果父级不设置position的话,那么那两个子标签就会以整个html页面为参考点,而把矩形飘到页面的两端

脱离文档流,其实就是不是按照页面中文本的顺序,一行一行的排班下来,而是按照自己的意愿,可能存在一些重叠,常用的办法就是定位和浮动。具体见以下几篇补充
什么是脱离文档流
正常文档流和脱离文档流
HTML元素脱离文档流的三种方法

下面这个例子,如果把父标签的相对定位改成绝对定位,那么和父标签相邻的test标签就会和该父标签重叠,也就是脱离文档流


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
        font-size: 15px;
        color: #fff;
    }

        .test1 {
        width: 400px;
        height: 400px;
        background: #234;
        position: relative;
    }

        .test2 {
        width: 300px;
        height: 300px;
        background: #345;
        position: absolute;
        left: 40px;
        top: 40px;
    }

        .test {
        width: 500px;
        height: 500px;
        background: #123;
    }
    </style>
</head>
<body>
<div class="test1"> test1
    <div class="test2">test2</div>
</div>
<div class="test"> test</div>
</body>

</html>

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。