问题一：position:fixed;

有些问题，实在闹不明白，先记下来，有时间好好研究

问题背景：

       
点击小视频，将其定位变成fixed，并且大小为框的100%，最后出现，播放视频一部分覆盖原背景，一部分不覆盖

解决方法： position:fixed; 用于元素本身出问题，用在父级元素就好了。还有个结论：下面的方法其实并不能改变元素大小为框的100%

.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(211, 211, 211, 1);
    z-index: 100;
}

       
只有设置了下面才可以：

width: 100%;
height: 100%;

       
其实这里面还引出另一个问题，如何自动补充宽高？？？

问题二：CSS样式的先后顺序：

当在CSS样式表里，针对同一个元素同一个样式定义了多次的值，按着值在css里的先后顺序，后者覆盖前者

.second-class {
    left: 20px;
}
.first-class {
    left: 100px;
}
//最后的left就是100px

问题三：用百分数计算ralative的top值

其实明明已经有值，可是却没有效果，直接数字设置（top:200px）就有了效果，同理：会用后一个计算，只是没有效果(计算了值，却没有效果)

.box {
    position: absolute;
}

.box img {
    position: relative;
    display: block;
    top: 100px;
    top: 20px;    
    top: 50%;
}

这个就会有效果：(这个特性很好的)

.box {
    position: absolute;
}

.box img {
    display: block;
    margin: 50%;
}

问题四：两个浮动的框应该会前后挨着呀

浮动碰到相对定位

.circle {
    float: left;
    position: relative;
    left: 50%;
    top: 50%;
}