CSS中的父相子绝布局

2019-11-12 19:02:39 阅读：262 来源： 互联网

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

注意：

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

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

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

<!DOCTYPE html>
<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>

标签：定位,父级,标签,布局,文档,position,父相子,CSS,页面
来源： https://www.cnblogs.com/michealjy/p/11844354.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS中的父相子绝布局