absolute和relative的位置关系与伪元素

guqiu 发布于2019-08-30 13:59 / 3540人阅读

摘要：实验出真理对添加如图对添加如图可知子容器的位置是相对于父容器的再看看伪元素的情况，我想在文本后加一个方块，代码如下却没有想要的效果，原来伪元素默认是所以宽高对他无效我们加上再试下这下行了，现在移动伪元素，加上可知伪元素与普通的块一

实验出真理
1.

html:

css:

.demo1 {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: blue;
}
.demo2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

对demo2添加left:10px;top:50px;如图：

对demo2添加right:-10px;top:50px;如图：

可知absolute子容器的位置是相对于relative父容器的.

再看看::after伪元素的情况，我想在文本后加一个方块，代码如下：

.demo1::after {
            content: " ";
            width: 50px;
            height: 50px;
            background-color: red;
        }

却没有想要的效果，

原来伪元素默认是inline-box,所以宽高对他无效．我们加上position: absolute;再试下

这下行了，现在移动伪元素，加上left:0px;top:20px;

可知伪元素与普通的块一样移动．
现在将demo1变成内联元素span效果如下

将left:0px;改为right:0px;

效果也是一样的.

第一篇文章收工！

GPU云服务器云服务器矩形和圆位置关系 dom元素位置空间和域名的关系备案和域名的关系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115683.html

前端计划——面试题总结-CSS篇

摘要：定位使元素的位置与文档流无关，因此不占据空间。可以知道属性有以下几个特点该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。前端面试之CSS篇 1、三种基本引入方式外部样式表内部样式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

马永翠 2019-08-29 13:09 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

hedzr 2019-08-29 13:53 评论0 收藏0
CSS学习笔记

CSS学习笔记在学习CSS的过程中做的一些记录，用于未来的快速回忆。 HTML常见元素和理解 head中的元素指定字符集 meta name=viewport content=...定义视图大小与设备屏幕大小的比例，用户是否可缩放指定基准路径 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 评论0 收藏0