Kéo xuống position-sticky giữ lại khi kéo xuống

 

.search-left .list-filters {

    position: sticky;

    top: 10px;

    padding-inline-start: 10px;

    padding-inline-end: 19px;

    padding-bottom: 10px;

    box-sizing: border-box;

    overflow-y: auto;

    overflow-x: hidden;

    max-height: calc(100vh - 103px);

    flex-shrink: 0;

    border-inline-end: 1px solid #e6e6e6;

    padding-inline-end: 1px;

}

css với hình ảnh position + canh giữa ảnh trong khung

**** HTML
<div class="wrap-img">
<a href="#"><img src="image.jpg"></a>
</div>
#### canh ảnh giữa của div chứa hình ảnh
**** CSS
.wrap-img {
    height: 246px;
    position: relative;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.wrap-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    max-height: 155px;
}
#### khi hover ảnh nghiêng
.wrap-img:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
#-----------------------------------------------------------#

.sp-shopcat-pic {

1. height: 171px;
2. text-align: center;
3. display: table;
4. width: 100%;

}

.sp-shopcat-pic a {

1. display: table-cell;
2. text-align: center;
3. vertical-align: middle;

}

.sp-shopcat-pic img {

1. max-width: 171px;
2. width: auto;
3. height: auto;
4. max-height: 171px;
5. border-radius: 3px;

}