absolute和relative的位置關系與偽元素

guqiu 發布于2019-08-30 13:59 / 3548人閱讀

摘要：實驗出真理對添加如圖對添加如圖可知子容器的位置是相對于父容器的再看看偽元素的情況，我想在文本后加一個方塊，代碼如下卻沒有想要的效果，原來偽元素默認是所以寬高對他無效我們加上再試下這下行了，現在移動偽元素，加上可知偽元素與普通的塊一

實驗出真理
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元素位置空間和域名的關系備案和域名的關系

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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