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所了解到之前还没有了解透彻的地方。

今天的学习笔记到这里！