css父相子绝 导航,CSS中的父相子绝布局

主要应用场景，就是我想要块的布局根据父级来定位，而不是根据页面。

例如，下面的例子中，我用两个半圆拼成一个正圆，思路是用一个父级标签把两个子标签包起来，父标签是一个正圆，然后子标签各占一半，先化成两个矩形，然后就是位置的选择。 这里用到的就是父相子绝，即父标签用到相对位置，子标签用到绝对位置，这样子标签的两个半圆就能贴到父标签，形成一个圆。

注意：

1.这里面父标签需要用相对定位，使用绝对定位的话会脱离文档流，见下面例子。

2.标签写position(relative或者absolute)的话，就会以它的父级标签作为参考，如果父级没写css样式，那就会以body样式作为参考，如果也没写，就会以整个html页面作为参考。例如这里，如果父级不设置position的话，那么那两个子标签就会以整个html页面为参考点，而把矩形飘到页面的两端

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

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

Title

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;

}

test1

test2

test

标签：定位,父级,标签,布局,文档,position,父相子,CSS,页面

来源： https://www.cnblogs.com/michealjy/p/11844354.html