Position sticky not working in IE or Safari

问题

I am creating a card in CSS. It works perfectly fine in Chrome but doesn't work in IE/Safari browser.

#nb {
    position: sticky;
    width: 280px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
#nb:hover:after {
    background: #f79031!important;
}
#nb::after {
    content: '';
    position: absolute;
    width: 940%;
    height: 100%;
    top: 170px;
    right: -502%;
    background: #ffffff;
    transform-origin: 54% 0;
    transform: rotate(129deg);
    z-index: -1;
}

#nb h5{text-align: left;
line-height: 25px;
padding-left: 7%;}

<div id="nb">
	<a href="http://www.wissentechnology.com/banking-financial/"><img
		class="bimg"
		src="https://wissen-kenvent.rhcloud.com/wp-content/uploads/2017/05/Banking-Financial.jpg"
		style="width: 100%;" />
		<h5 style="font-size: x-large; color: #000000; padding-top: 15px;">Banking
			& Finance</h5>
		<h4
			style="color: #000000; padding-top: 15px; text-align: justify; padding-left: 7%; padding-right: 7%;">We
			bring the right mix of domain and technical expertise to help you
			take emerging imperatives head on and translate them to competitive
			advantage.</h4> </a>
</div>

Created a JSFiddle

回答1:

Changing the position of #nb to relative fixes the issue.

#nb {
    position: relative;
    width: 280px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

回答2:

Webkit is the HTML/CSS rendering engine used in Apple's Safari browser.

Use -webkit-sticky instead of sticky for Safari.

#nb {
     position: -webkit-sticky;
}

来源：https://stackoverflow.com/questions/44184062/position-sticky-not-working-in-ie-or-safari