場(chǎng)景

我們經(jīng)常會(huì)遇到這種場(chǎng)景，有一個(gè)待選圖片列表，在圖片上(可能是右上角也有可能時(shí)右下角)疊放一個(gè)勾選狀態(tài)圖標(biāo)，這篇文章就記錄實(shí)現(xiàn)這個(gè)功能的過程。

原理

利用flex布局space-around顯示圖片列表

在圖片的外層加一個(gè)div，同時(shí)把勾選狀態(tài)圖標(biāo)加進(jìn)去

現(xiàn)在的問題就是如何把勾選狀態(tài)圖標(biāo)移到圖片上(這部分可對(duì)照最后的代碼看)

給圖標(biāo)添加一個(gè)margin-right，把圖標(biāo)擠過去，這要求pic-block的寬度固定，如果要到達(dá)響應(yīng)式頁面的效果，這個(gè)方法是肯定不行的。

將圖標(biāo)設(shè)置為position：relative相對(duì)定位，然后再添加right:10%讓圖標(biāo)往左移動(dòng)，這樣雖然能達(dá)到一定的適應(yīng)性，而且pic-block的寬度不需要固定，但是圖標(biāo)并未脫離文檔流，所以在頁面中還是會(huì)占用空間，而當(dāng)有的圖片有勾選圖標(biāo)時(shí)，有的沒有圖標(biāo)時(shí)，布局就會(huì)不那么好看，所以這個(gè)方法使用場(chǎng)景也十分有限。

image.png

將圖標(biāo)設(shè)置為position:absolute絕對(duì)定位，再添加right:10%讓圖標(biāo)往左移動(dòng)，將pic-block設(shè)置為position:relative相對(duì)定位，這種方法能達(dá)到完全的自適應(yīng)。圖標(biāo)的絕對(duì)定位讓圖標(biāo)脫離文檔流，使其不占用頁面空間，flex布局的圖片列表就能一直按照?qǐng)D片的空間(pic-block不設(shè)置width，其width由圖片的width決定)進(jìn)行彈性布局；相對(duì)布局的pic-block能讓絕對(duì)定位的圖標(biāo)以它作為父節(jié)點(diǎn)(絕對(duì)定位以最近的非static布局的元素作為父節(jié)點(diǎn))。這兩點(diǎn)使圖標(biāo)一直保持在圖片的靠右邊10%的位置。(推薦)

最終效果

最終代碼

Document

.pic-list {

display: flex;

height: 15.3vh;

margin-bottom: 1.7vh;

align-items: center;

justify-content: space-around;

}

.pic-list .pic-block-img {

height: 100%;

}

.pic-list .checked-small {

height: 20%;

position: absolute;

bottom: 2%;

right: 10%;

}

.pic-block {

position: relative;

height: 100%;

margin: 0 auto;

}

.hidden {

display: none;

}

let checkedPictures = new Set();

function checkPicture(id) {

if(checkedPictures.has(id)) {

checkedPictures.delete(id);

document.getElementById(id+'-checked').setAttribute("class", "hidden");

}

else {

checkedPictures.add(id);

document.getElementById(id+'-checked').setAttribute("class", "checked-small");

}

}

總結(jié)

以上是生活随笔為你收集整理的html中两个图片叠放,CSS实现图片叠放（勾选图标）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。