絕對定位實例(position:absolute與overflow:hidden)運用

需要完成如下布局效果

 運用到幾個CSS知識點

1).有上角的圖標是基於icon的字體文件(關鍵詞:eot, svg, ttf, wofff, woff2) 屬於前端基本功.

<li v-for="(item, index) in fileList" :key="index">
  <img :src="$apiImgUrl(item.url)" class="item-thumbnail" />
  <span class="iconfont icon-close_fill" @click="handleRemove(item,fileList)"></span>
  <!-- <svg-icon icon-class="cancel" class="icon icon-svg-cancel" /> -->
</li>

第3行:這里使用了比較容易使用的class 加載icon類名:icon-close_fill 而具體字體樣式引用css文件

第4行: 自己封裝了一個svg風格的vue組件, 可以忽略.

注意點: li作為img和span的容器, span所表示的右上角圖標在img之后, 體現了CSS層疊式樣表層疊的思想

li {
//overflow: hidden;
z-index: 0;
position: relative;
display: list-item;
}

.iconfont {
    display: block;
    position: absolute;
    top: -8px;
    right: -8px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #555;
    z-index: 2;
}

通過這個例子對overflow:hidden效果理解一下, 用於當子元素大小或位置超出容器時, 設置容器是否"遮擋"子元素, hidden表示遮擋.