relative與absolute問題

這篇屬于補充内容

這次作業中還有一個花時間比較久的就是小部分的定位問題，比如在彈出視窗中

頂部的箭頭其實是用圖檔顯示的，之前有看到過用純代碼通過邊框展現出箭頭的效果，但是在這裡卻不能夠使用，因為那種方法隻能是産生這種效果

即沒有線條的，當然現在也不能斷言沒有别的方法。

這種方法的原理圖是這樣的

代碼

html

<div class="item" style="width: 100px">
            <div class="test"></div>
    </div>
           

css

.test{
            border-width: px;
            border-style: solid;
            border-color: yellow blue green black;
        }
        .item{
            margin: px;
            overflow: hidden;
            clear: both;
        }
           

然後回到作業中的問題，是如何将圖檔準确的定位。我在解決這個問題的時候，其實用到相對定位與絕對定位的結合。現将盒子box1設定為相對定位，将圖檔用作小盒子box2的背景圖，将2放在1中，設定為絕對定位，由于絕對定位會根據最近的非 static 定位祖先元素的偏移，因而2其實會在1中進行偏移。當還沒有很好的掌握定位時，可以根據以下步驟一步一步嘗試定位：

1. 将top、left屬性都設定為0，觀察盒子2的位置，其所在位置即初始位置
2. 根據初始位置進行偏移

在偏移過程中去逐漸掌握規律，比如說初始位置的定位會包含在padding内而不再margin内；當用用到top屬性時，盒子2的上邊界會抵着盒子1的上填充，同理，當使用left屬性時，即代表左邊界抵着左填充，如下：

具體代碼

html

<div style="background-color: purple;display: inline-block;">
        <div class="abc"><div class="ghi"></div>
        <!-- 隻是為了顯示出盒子内容 -->
            <div class="def"></div>
        </div>
    </div>
           

css

.abc{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: relative;
    display: inline-block;
    background-color: blue;
}
.def{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: absolute;
    top: ;
    left: ;
    display: inline-block;
    background-color: skyblue;
}
.ghi{
    background-color: #fff;
    width: px;
    height: px;
}
           

通過檢視可以發現

邊框是剛好抵住的，正符合上面所說的。然後就可以通過top、left、bottom、right來定位盒子的具體位置，但位置是相對位置，可以說是初始位置向相反方向移動。即top是代表初始位置在定位後位置的上面的距離，可以了解為初始位置向下移動了多少距離。

這是今天通過靜态作業2所了解到之前還沒有了解透徹的地方。

今天的學習筆記到這裡！