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

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

**注意：**


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




脱离文档流，其实就是不是按照页面中文本的顺序，一行一行的排班下来，而是按照自己的意愿，可能存在一些重叠，常用的办法就是定位和浮动。具体见以下几篇补充
**[什么是脱离文档流](https://zhidao.baidu.com/question/556990261.html)**
**[正常文档流和脱离文档流](https://www.cnblogs.com/masanhe/p/8318002.html)**
**[HTML元素脱离文档流的三种方法](https://www.cnblogs.com/ning123/p/11011845.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>

CSS中的父相子绝布局的更多相关文章

  1. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  2. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  3. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  4. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  5. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  6. css中合理的使用nth-child实现布局

    写这篇文章的目的.主要是今天要实现一个布局:li.每行三个,总数不定.仅仅能相邻的li之间须要10px的间距.效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  7. python全栈开发day41-background、精灵图技术、定位（相、绝、固）、z-index

    一.昨日内容回顾 1.标准文档流定义: https://www.jianshu.com/p/b4d2c1dfd6e5 2.浮动和浮动的四大特性 1)脱标 2) 浮动元素相互贴靠 3)字围 4)紧凑(浮 ...

  8. css中定位功能的特性

    它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...

  9. 深度剖析Vue中父给子、子给父、兄弟之间传值！

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

随机推荐

  1. session未释放

    客户反映一个关于session的bug,说有了1,2天以后,就无法登陆了. 我们这边试了好几天,都没有出现类似问题,后来没办法,只能远程开会,7点左右和他们通话,偶然发现他们居然直接关remote d ...

  2. SSM配置动态数据源

    多数据源配置主要涉及自定义类(DataSource注解类.DataSourceAspect切面类,动态数据源接口实现类.以及数据源字符串线程保存类),pom.xml文件.applicationCont ...

  3. angular6 ngx-echarts 图表数据更新

    最近在用angular写一个echarts图表,初始化赋值数据可以展示,但是重新获取数据以后,图表不会刷新. 后来发现了问题点所在, <div echarts class="demo- ...

  4. web.xml引入 xml (tomcat 7.0.52) 以上版本报错

    原文地址:https://blog.csdn.net/sdmxdzb/article/details/47728017?locationNum=11 今天在搞工作流,tomcat7.0.57 总是报错 ...

  5. 【shell脚本】检查内存使用情况===chenkMen.sh

    检查内存使用情况,当内存可使用等于100时,释放缓存 [root@localhost thy]# cat checkMem.sh #!/bin/bash #防止内存溢出问题 used=`free -m ...

  6. 【shell脚本】自动监控tomcat服务===autoCheck.sh

    自动监控tomcat服务,当tommcat服务挂掉时自动重启 一.脚本内容 [root@localhost ]# cat /root/autoCheck.sh #!/bin/bash startTom ...

  7. Kubernetes Pod 调度约束

    Kubernetes Pod 调度约束 可以将pod调度到指定的节点Node内 默认:根据节点资源利用率等分配Node节点. nodeName用于将Pod调度到指定的Node名称上 nodeSelec ...

  8. Spring源码系列 — BeanDefinition扩展点

    前言 前文介绍了Spring Bean的生命周期,也算是XML IOC系列的完结.但是Spring的博大精深,还有很多盲点需要摸索.整合前面的系列文章,从Resource到BeanDefinition ...

  9. MySQL优化常见Extra分析——慢查询优化

    数据准备: create table user ( id int primary key, name ), sex ), index(name) )engine=innodb; 数据说明:用户表:id ...

  10. 用Python完成毫秒级抢单，助你秒杀淘宝大单

    目录: 引言 环境 需求分析&前期准备 淘宝购物流程回顾 秒杀的实现 代码梳理 总结 0 引言 年中购物618大狂欢开始了,各大电商又开始了大力度的折扣促销,我们的小胖又给大家谋了一波福利,淘 ...