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

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

**注意：**


**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. angular6.x 引入echarts

    因为angular2+ 使用 ==typescript==开发,所以想要使用echarts,必须安装echarts针对angular的插件ngx-echarts.本文案列实际效果如上图. 安装ngx- ...

  2. arduino (2) 浊度传感器

    z https://detail.tmall.com/item.htm?id=601391726801&spm=a1z09.2.0.0.60082e8dMiX0LM&_u=e1qf7b ...

  3. INVERSION包

    1.安装该包 if (!requireNamespace("BiocManager", quietly = TRUE))install.packages("BiocMan ...

  4. ulimit 用法和系统优化

    ulimit :用于shell启动进程所占用的资源 -a:显示目前资源限制的设定: -c <core文件上限>:设定core文件的最大值,单位为区块: -d <数据节区大小>: ...

  5. Angular命令和基础操作

    本文档假设你已经熟悉了 HTML,CSS,JavaScript和来自最新标准的一些知识,比如类和模块. 一.Angular命令 命令语法: 大多数命令以及少量选项,会有别名.别名会显示在每个命令的语法 ...

  6. java使用jxls导出Excel

    jxls是基于POI的Excel模板导出导入框架.通过使用类似于jstl的标签,有效较少导出Excel的代码量. 1.pom <!-- https://mvnrepository.com/art ...

  7. Javal连载4-注释&class与public class区别

    一.Java注释 1.作用:不会编译倒.class文件之中:增强可读性 2.分类: (1)单行注释(只注释当前行):// (2)多行注释: /* 注释 注释 注释 */ (3)javadoc注释 /* ...

  8. php explode容易犯的错误

    php explode容易犯的错误 <pre> $pos = strpos($v, 'Controller'); if (is_numeric($pos)) { $kongzhiqifeg ...

  9. Kafka学习笔记之Kafka High Availability(下)

    0x00 摘要 本文在上篇文章基础上,更加深入讲解了Kafka的HA机制,主要阐述了HA相关各种场景,如Broker failover,Controller failover,Topic创建/删除,B ...

  10. 一款常用的截图工具（能够截gif动图）

    这款工具用来截程序的演示GIF图片,灰常方便. 直接上Github地址: https://github.com/NickeManarin/ScreenToGif